Opdracht jQueryMobile

Basis instellingen

  1. Zorg er voor dat er met een mobile device niet ingezoomd kan worden:
    2. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    

  2. Link de voor jquerymobile benodigde bestanden in:
    3. 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

    

    

  3. Sla het bestand op en test in de browser of je geen fouten krijgt.
    4. 




Pagina's maken


    

  1. Maak een pagina door een div aan te maken met een attribuut data-role en de waarde page:
    2. 

    <div data-role="page">
    

    

  2. Plaats in deze pagina een afbeelding van 400px breed en 600px a 800px hoog bijvoorbeeld:
    3. 

      

    1. http://i.imgur.com/EZT5cyW.gif
      2. 

    2. https://lh6.ggpht.com/Td91kIBlGXqRrjSjhAcveZF7dLArHqqUFcKK0L8M5eiHv3OF6-Zgj6RiDOIROmV_5lg=h900
      3. 

    3. http://cazphoto.co.uk/photoblog/files/2012/11/D930-011.jpg
      4. 

    4. http://i1.ytimg.com/vi/E1d2Hnef0sw/maxresdefault.jpg
      5. 

    5. https://lh5.ggpht.com/Pft2p4UblTiTKDgc5rvLo9qY_NLgR66qHF4OiXvuLm1KJWC2DNuQVrkDl6ad9sLqJ9g=h900
      6. 

    

  3. Maak nog een pagina m.b.v. div en geef deze een
    4. 

    id="page1"
    

  4. Zet om de afbeelding van de eerste pagina een link en link die naar page1
    5. 

  5. Sla op en test de werking
    6. 




Linken en transitions




    

  1. Geef de eerste pagina ook een id: splash
    2. 

  2. Maak in page1 een link aan die terug linkt naar de eerste pagina
    3. 

  3. Geef deze link een attribuut data-transition en geef deze een waarde flip:
    4. 

    data-transition="flip"
    

  4. Dupliceer de link 3 maal (maak dus nog 3 extra links) en gebruik nog 3 andere transitions. Kijk op http://demos.jquerymobile.com/1.4.0/transitions/ voor alle opties.
    5. 

  5. Sla op en test de werking
    6. 






Dialog / melding








    

  1. Maak nog een pagina aan, met als id dialog:
    2. 

    <div id="dialog" data-role="page">

    <div data-role="header">
        <h1>Dialog</h1>
    </div>

    <div role="main" class="ui-content">
        <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
    </div>

</div>

    

  2. Maak in pagina page1 nog een link aan met de tekst dialog geef deze een attribuut data-rel met de waarde dialog
    3. 

    data-rel="dialog"
    

  3. Test de werking
    4. 






Buttons








    

  1. Maak in de pagina dialog onder de paragraaf een link aan met de tekst terug
    2. 

  2. Geef deze link een attribuut data-rel met de waarde back
    3. 

    data-rel="back"
    

  3. Geef deze link een attribuut class met de waarde ui-btn
    4. 

    class="ui-btn"
    

  4. Kijk op http://demos.jquerymobile.com/1.4.0/button-markup/ en geef de knop met behulp van extra classes: ronde hoeken en schaduw
    5. 

  5. Test de werking
    6. 




Geef een eigen style






    

  1. Maak een eigen css bestand aan en link die in je html bestand (in de header)
    2. 

  2. Kijk met de inspector van chrome welke stijlen er door jquery mobile wordt toegepast op de onderdelen die jij wilt veranderen
    3. 

  3. Overschrijf deze stijlen in je eigen stylesheet
    4. 












Gepost door



op