SlideServe
Télécharger Obtenir Pro
Menu
Accueil Pro
Préférences
ApparenceLight Aide et commentaires
© SlideServe · v2026

JQuery Mobile

walt avatar
walt
29 diapositives · 606 Views · Jul 22, 2014

JQuery Mobile . Benefits. Required links. <head > < meta name="viewport" content="width=device-width, initial-scale=1" >

#jquery mobile #jquery mobile ppt #powerpoint #presentation
JQuery Mobile - slide 1
01 / 29JQuery Mobile
1 / 17

Télécharger la présentation

JQuery Mobile
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation

  1. JQuery Mobile

  2. Benefits

  3. Required links <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/ jquery.mobile-1.4.1.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script> </head> Remember that we need to add the links to the head, in this order.

  4. HTML5 attribute: data-role We will start with these to understand basic page construction and layout: data-role="button” data-role="collapsible” data-role="collapsible-set” data-role="controlgroup" data-role="fieldcontain” data-role="slider” data-role="listview” • data-role="page” • data-role="header” • data-role="navbar” data-role="content” data-role="footer” • data-role="navbar” These are also available, and we will get to them later.

  5. Creating Pages within the Body Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of "header", "content", and "footer".

  6. Multiple Pages in one file A single HTML document can contain multiple 'pages' that are loaded together by stacking multiple divs with a data-role of "page". Each 'page' block needs a unique ID (id="foo") that will be used to link internally between 'pages' (href="#foo”). IDs on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document. <body> <div data-role="page" id="foo"> <div data-role="header”>Foo</div> <div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p>View internal page called <a href="#bar">bar</a></p> </div> <div data-role="footer”>Page Footer</div> </div> <div data-role="page" id="bar"> <div data-role="header”>Bar</div> <div data-role="content"> <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is being clicked.</p> <p><a href="#foo">Back to foo</a></p> </div> <div data-role="footer”>Page Footer</div> </div> </body>

  7. Other attributes for Page data-theme Specifies theme color of the page data-title Specified the page title The title is just a string that you specify. The theme is part of the jquerycss. It is specified by a letter from a-z.Find them here: http://demos.jquerymobile.com/1.1.0/docs/api/themes.html Want to create your own JQuery Mobile Themes? http://themeroller.jquerymobile.com

  8. Transitions between Pages (and dialogs)

  9. Header/Footer Attributes

  10. Positioning Headers/Footers

  11. Adding Nav Buttons to Headers/Footers • Headers can contain at most TWO buttons • Footers can contain as many as you like • To center, use style="text-align:center;” • To add multiple buttons either horizontal or vertical, add them to a control group or a navbar.

  12. Adding Nav Buttons

  13. The buttons themselves…

  14. Adding Icons to Buttons More choices??? http://www.w3schools.com/jquerymobile/jquerymobile_ref_icons.asp

  15. Popups • Close them by clicking outside the box or pressing the “Esc” key • Add data-transition as with page nav • Position using data-position-to inside the anchor

  16. Panels • The panel markup must be placed before or after the header, content and footer inside a jQuery Mobile page.

  17. Panel Options

  18. Collapsible – Nested and Sets

  19. Lists By default, links inside a list item will automatically turn into a button (no need for ui-class="btn" or data-role="button")

  20. List Dividers

  21. List Icons

  22. Forms For the most part, we will proceed as normal with forms. However, to make them look proper, wrap them in: <div class="ui-field-contain"> The exceptions are two NEW elements, Select and Sliders. With Select, we can also use “multiple”

  23. Wrapper Class

  24. Mobile Forms

  25. Text Input

  26. Buttons

  27. Radio Button

  28. CheckBoxes

  29. Sliders and Select <form method="post" action="demoform.asp">  <label for="points">Points:</label>  <input type="range" name="points" id="points" value="50" min="0" max="100” data-show-value="true"></form><form method="post" action="demoform.asp">  <label for="switch">Flip toggle switch checkbox:</label>    <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False"></form>