jQuery Mobile UI
Upcoming SlideShare
Loading in...5
×
 

jQuery Mobile UI

on

  • 210 views

 

Statistics

Views

Total Views
210
Views on SlideShare
210
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery Mobile UI jQuery Mobile UI Presentation Transcript

    • jQuery Mobile Howard 2014/03/21
    • Introduction  jQuery Mobile is a touch-friendly UI framework built on jQuery Core that works across all popular mobile, tablet and desktop platforms.
    • 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.
    • Viewport meta tag  <meta name="viewport" content="width=device-width, initial-scale=1">
    • 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”
    • Inside the body: Pages
    • 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.
    • 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.
    • Listview - Filter  data-filter  data-filter-placeholder
    • Listview - List dividers  data-role="list-divider"
    • Listview - Count bubbles  ui-li-count
    • 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
    • Grids 
    • Grids
    • 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.
    • Event - mobileinit  This event is triggered after jQuery Mobile has finished loading, but before it has started enhancing the start page.
    • Event - pageinit  Triggered on the page being initialized, after initialization occurs.
    • tap  Triggered after a quick, complete touch event.
    • Reference  http://demos.jquerymobile.com/1.4.2/  http://msdn.microsoft.com/zh-tw/hh875190.aspx