1 / 29

JQuery Mobile

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

walt
Download Presentation

JQuery Mobile

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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>

More Related