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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

jQuery Mobile UI

278
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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  http://demos.jquerymobile.com/1.4.2/  http://msdn.microsoft.com/zh-tw/hh875190.aspx