jQuery Mobile UI

393
-1

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
393
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery Mobile UI

  1. 1. jQuery Mobile Howard 2014/03/21
  2. 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. 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. 4. Viewport meta tag  <meta name="viewport" content="width=device-width, initial-scale=1">
  5. 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. 6. Inside the body: Pages
  7. 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. 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. 9. Listview - Filter  data-filter  data-filter-placeholder
  10. 10. Listview - List dividers  data-role="list-divider"
  11. 11. Listview - Count bubbles  ui-li-count
  12. 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. 13. Grids 
  14. 14. Grids
  15. 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. 16. Event - mobileinit  This event is triggered after jQuery Mobile has finished loading, but before it has started enhancing the start page.
  17. 17. Event - pageinit  Triggered on the page being initialized, after initialization occurs.
  18. 18. tap  Triggered after a quick, complete touch event.
  19. 19. Reference  http://demos.jquerymobile.com/1.4.2/  http://msdn.microsoft.com/zh-tw/hh875190.aspx
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×