Your SlideShare is downloading. ×
0
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
jQuery Mobile UI
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

318

Published on

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

No Downloads
Views
Total Views
318
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
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

×