1. JQuery Mobile

2. Benefits

3. Required links Remember that we need to add the links to the head, in this order.

4. HTML5 attribute: data-role 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 We will start with these to understand basic page construction and layout: 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. Foo I'm first in the source order so I'm shown as the page. View internal page called bar Page Footer Bar 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. Back to foo Page Footer

7. Other attributes for Page data-themeSpecifies theme color of the page data-titleSpecified the page title The title is just a string that you specify. The theme is part of the jquery css. 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, usestyle="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: 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 Points: Flip toggle switch checkbox: