Your SlideShare is downloading. ×
  • Like
jQuery Mobile UI
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply


Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. jQuery Mobile Howard 2014/03/21
  • 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.
  • 19. Reference  