jQuery Mobile UI
- 2. Introduction jQuery Mobile is a touch-friendly UI framework built on jQuery Core that works across all popular mobile, tablet and desktop platforms.
- 3. Mobile page structure <!DOCTYPE html> In the head, references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off.
- 4. Viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1">
- 5. Inside the body: Pages 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-role="header” class="ui-content” data-role="footer”
- 6. Inside the body: Pages
- 7. Listview A listview is coded as a simple unordered list (ul) or ordered list (ol) with a data-role="listview" attribute and has a wide range of features.
- 8. Listview - Inset Adding the data-inset="true" attribute to the list (ul or ol), applies the inset appearance which is useful for mixing a listview with other content on a page.
- 9. Listview - Filter data-filter data-filter-placeholder
- 10. Listview - List dividers data-role="list-divider"
- 11. Listview - Count bubbles ui-li-count
- 12. Listview - Formatted content Supplemental information can be added to the right of each list item by wrapping content in an element with a class of ui-li-aside
- 13. Grids
- 14. Grids
- 15. Icons jQuery Mobile provides a number of icons that can be used by applying a data-icon attribute or a ui-icon- class to a suitable widget.
- 16. Event - mobileinit This event is triggered after jQuery Mobile has finished loading, but before it has started enhancing the start page.
- 17. Event - pageinit Triggered on the page being initialized, after initialization occurs.
- 18. tap Triggered after a quick, complete touch event.