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

Views

Total Views
181
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

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