jQuery Mobile Tutorial        2013/02/05        Mowd Chen
 jQuery Mobile   Introduction   Components   API
What is jQuery Mobile? Unified user interface system. Works seamlessly across all popular mobile device  platforms. Bui...
What is jQuery Mobile? Use ajax navigation system that brings animated page  transitions and a core set of UI widgets   ...
Supported platform   Apple iOS 3.2*-6.0 - Tested on the original     Chrome for Android 18 - Tested on    iPad (4.3 / 5....
Quick start: basic page
Quick start: listview
Quick start: slider
Quick start: button
Page & dialogs
Page & dialogs jQuery Mobile includes a navigation system to load  linked pages into the DOM via AJAX, enhance the new  c...
Single page
Multi-page
Multi-page http://jquerymobile.com/demos/1.2.0/docs/pages/multip  age-template.html
Page title jQuery Mobile automatically parses the title of the page  pulled via Ajax and changes the title attribute of t...
Linking page
Linking page http://jquerymobile.com/demos/1.2.0/docs/pages/page-  links.html
Page transitions http://jquerymobile.com/demos/1.2.0/docs/pages/page-  transitions.html
Page transitions Custom the link transition Change the default transitions.   Ex: $.mobile.defaultDialogTransition = „s...
Page Loading Widget Deprecated     $.mobile.loadingMessage     $.mobile.loadingMessageTextVisible     $.mobile.loading...
Page Loading Widget
Dialog<a href="foo.html" data-rel="dialog">Open dialog</a>
Dialog Transitions   data-transition="pop” Open Dialog   $(".selector”).dialog({ overlayTheme: "e" }); Close dialog  ...
Popup http://jquerymobile.com/demos/1.2.0/docs/pages/popup  /index.html
Popup Transitions   data-transition="flip” Open popup   $( "#myPopupDiv" ).popup( "open" ); Close popup   $( "#myPop...
Popup Add close button   <a href="#" data-rel="back" data-role="button" data-     theme="a" data-icon="delete" data-icon...
Popup Theme  <div id="both" data-role="popup" data-theme="e" data-   overlay-theme="a" class="ui-content">
Prefetching & catching pages Prefetching   <a href="prefetchThisPage.html" data-prefetch>..</a>   $.mobile.loadPage( pa...
Scripting pages pageinit = DOM ready Changing page
Scripting pages Scrolling to a position within a page Passing parameters between pages   page params plugin   jQuery M...
Theme http://jquerymobile.com/demos/1.2.0/docs/pages/pages  -themes.html
Toolbars
Toolbars Toolbar page elements are used for headers and  footers throughout many mobile sites and applications.  These sc...
Header bars
Header bars Adding Back buttons   Add data-add-back-btn="true” in page div.   Add data-rel="back” in anchor.
Footer bars
Footer bars Fixed & Persistent footers   Add data-position="fixed” in footer bar div.
Nav bars
Nav bars
Nav bars Icons in navbars   Add data-icon in nav bars.   Set the position by data-iconpos="top” (left, right, bottom)
Buttons
Buttons Buttons are core widgets in jQuery Mobile, and are  used within a wide range of other plugins. The button  markup...
Buttons q
Buttons Buttons support data-icon and data-iconpos.   http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons     -icon...
Buttons Grouped buttons   Vertical   Horizontal     Add data-type="horizontal"
Content Formatting
Content Formatting Layout grids     two-column (using the ui-grid-a class)     three-column (using the ui-grid-b class)...
Content Formatting Layout grids   Buttons   Toolbars
Content Formatting Collapsible content   Add data-role="collapsible”.   Closed   Opened
Content Formatting Collapsible support data-icon and data-iconpos Collapsible content   To expanding collapsibles on lo...
Content Formatting Collapsible content   Programmatically close collapsible content     $( ".selector" ).trigger( "coll...
Content Formatting Collapsible set (accordion)
Content Formatting Collapsible set (accordion)
Content Formatting Collapsible set (accordion)   If the collapsible has been update by script, use    $( ".selector" ).c...
Forms
Forms All form widgets begin with native form elements with  rich HTML semantics that are enhanced to make them  more att...
Forms Forms   <form action="form.php" method="post"> ... </form> Mini sized elements   <input type="text" name="name" ...
Forms Disable element   Add ui-disabled class to disable elements. Field containers
Forms Refresh elements
Forms Use the original form element.   Add data-role="none"
Text inputs & Textareas Example 1 Example 2
Text inputs & Textareas Input type support list      Text      Password      Number      Number + pattern      Email...
Text inputs & Textareas Disable a textinput   $(.selector).textinput(disable); (enable)
Text inputs & Textareas Textarea
Search input Add input type=“search”
Slider Add input type=“range”
Slider Available parameter   step   data-highlight="true” Programmatically control slider   $(input).slider(); (enabl...
Flip toggle switch A binary selector Programmatically control flip toggle switch   $(select).slider();
Flip toggle switch Loner labels
Radio buttons
Radio buttons Horizontal radio buttons Programmatically control radio buttons   $("input[type=radio]").checkboxradio();...
Checkboxes
Checkboxes Contain checkboxes in <fieldset data-  role="controlgroup">
Checkboxes Add data-type="horizontal” in fieldset Programmatically control checkboxes   $("input[type=checkbox]").check...
Select menus
Select menus Support optgroup  <optgroup label="FedEx">       <option value="firstOvernight">First Overnight</option>    ...
Selected menus Add <fieldset data-role="controlgroup">   Vertical menus   Horizontal menus: data-type="horizontal"
Select menus To use custom menus, add the data-native-  menu="false”   Support multiple="multiple”, optgroup
Select menus Programmatically control select menus   $(select).selectmenu();       enable       disable       open (c...
Listviews
Listviews Lists are used for data display, navigation, result  lists, and data entry so jQuery Mobile includes a wide  ra...
Basic listview Add data-role=“listview” in ul. Programmatically control listviews   $(.selector).listview(refresh);
Nested list http://jquerymobile.com/demos/1.2.0/docs/lists/lists-  nested.html
Numbered list
Split button list
List dividers
List dividers Auto generate list dividers   Add data-autodividers="true” in ul.
Count bubble
Thumbnails
Icons
List formatting
Inset list Add data-inset="true” in ul.
Search filter bar Add data-filter=“true” in ul.   http://jquerymobile.com/demos/1.2.0/docs/lists/lists-     search.html
Search filter bar To search hidden data in list   Add data-filtertext=“some text” in li.
Readonly lists
Collapsible lists Add data-role="collapsible” to the parent of ul.
API
Configuring default
Configuring default Configurable options     activePageClass, string, default: "ui-page-active”     defaultDialogTransi...
Touch events $(“.target”).bind(“tap”,function() {}); tap taphold swipe swipeleft swiperight
Orientation change event $(document).bind(“orientationchange”, function(event)  {});   Return event.orientation = portra...
Page load events $(document).bind(“pagebeforeload”, function() {}); pagebeforeload pageload pageloadfailed
Page change events $(document).bind(“pagebeforechange”, function() {}); pagebeforechange pagechange pagechangefailed
Page transition events $(document).bind(“pagebeforeshow”, function() {}); pagebeforeshow pagebeforehide pageshow page...
Page initialization events $(document).bind(“pagebeforecreate”, function() {}); pagebeforecreate pagecreate pageinit
Page remove events $(document).bind(“pageremove”, function() {}); pageremove
Methods $.mobile.changePage()
Methods $.mobile.loadPage()
Methods $.mobile.path.parseUrl(url)
Themes framework ThemeRoller   http://jquerymobile.com/themeroller/
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
Upcoming SlideShare
Loading in …5
×

jQuery Mobile

2,776 views

Published on

Published in: Technology
  • Be the first to comment

jQuery Mobile

  1. 1. jQuery Mobile Tutorial 2013/02/05 Mowd Chen
  2. 2.  jQuery Mobile  Introduction  Components  API
  3. 3. What is jQuery Mobile? Unified user interface system. Works seamlessly across all popular mobile device platforms. Built on the rock-solid jQuery and jQuery UI foundation. Focused on a feature-rich but lightweight codebase. Built on progressive enhancement with a flexible theming system and ThemeRoller tool.
  4. 4. What is jQuery Mobile? Use ajax navigation system that brings animated page transitions and a core set of UI widgets  Pages  Dialogs  Toolbars  Listviews  Buttons with icons  Form elements  Accordions  Collapsibles
  5. 5. Supported platform Apple iOS 3.2*-6.0 - Tested on the original  Chrome for Android 18 - Tested on iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1 / Android 4.0 and 4.1 deviceset 6.0), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.1  Chrome Desktop 11-21 - Tested on OS X / 6.0) 10.7 and Windows 7 Android 2.1-2.3 - Tested on the HTC  Safari Desktop 4-5 - Tested on OS X 10.7 Incredible (2.2), original Droid (2.2), HTC and Windows 7 Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1  Firefox Desktop 4-15 - Tested on OS X (1.5) 10.7 and Windows 7 Android 3.2 (Honeycomb) - Tested on the  Internet Explorer 7-10 - Tested on Samsung Galaxy Tab 10.1 and Motorola Windows XP, Vista and 7 XOOM  Opera Desktop 10-12 - Tested on OS X Android 4.0 (ICS) - Tested on a Galaxy 10.7 and Windows 7 Nexus. Note: transition performance can be poor on upgraded devices Android 4.1 (Jelly Bean) - Tested on a Galaxy Nexus and Galaxy 7
  6. 6. Quick start: basic page
  7. 7. Quick start: listview
  8. 8. Quick start: slider
  9. 9. Quick start: button
  10. 10. Page & dialogs
  11. 11. Page & dialogs jQuery Mobile includes a navigation system to load linked pages into the DOM via AJAX, enhance the new content, then display pages with a rich set of animated page transitions. The navigation system automatically transforms all links and forms by using progressive enhancement to hijack links and issue AJAX requests. The back button is fully supported so pages, dialogs, and popups all seamlessly work with the navigation system. There are tools to prefetch & cache, dynamically inject, and script pages for advanced use cases.
  12. 12. Single page
  13. 13. Multi-page
  14. 14. Multi-page http://jquerymobile.com/demos/1.2.0/docs/pages/multip age-template.html
  15. 15. Page title jQuery Mobile automatically parses the title of the page pulled via Ajax and changes the title attribute of the parent document to match. In multi-page template, simply use:
  16. 16. Linking page
  17. 17. Linking page http://jquerymobile.com/demos/1.2.0/docs/pages/page- links.html
  18. 18. Page transitions http://jquerymobile.com/demos/1.2.0/docs/pages/page- transitions.html
  19. 19. Page transitions Custom the link transition Change the default transitions.  Ex: $.mobile.defaultDialogTransition = „slide‟;
  20. 20. Page Loading Widget Deprecated  $.mobile.loadingMessage  $.mobile.loadingMessageTextVisible  $.mobile.loadingMessageTheme  $.mobile.showPageLoadingMsg()  $.mobile.hidePageLoadingMsg()
  21. 21. Page Loading Widget
  22. 22. Dialog<a href="foo.html" data-rel="dialog">Open dialog</a>
  23. 23. Dialog Transitions  data-transition="pop” Open Dialog  $(".selector”).dialog({ overlayTheme: "e" }); Close dialog  $(.selector).dialog(close);
  24. 24. Popup http://jquerymobile.com/demos/1.2.0/docs/pages/popup /index.html
  25. 25. Popup Transitions  data-transition="flip” Open popup  $( "#myPopupDiv" ).popup( "open" ); Close popup  $( "#myPopupDiv" ).popup( "close" );
  26. 26. Popup Add close button  <a href="#" data-rel="back" data-role="button" data- theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> Add padding  <div data-role="popup" id="popupPadded" class="ui- content"> Position choice: window, origin, #id  <a href="#positionWindow" data-rel="popup" data- position-to="window">
  27. 27. Popup Theme  <div id="both" data-role="popup" data-theme="e" data- overlay-theme="a" class="ui-content">
  28. 28. Prefetching & catching pages Prefetching  <a href="prefetchThisPage.html" data-prefetch>..</a>  $.mobile.loadPage( pageUrl, { showLoadMsg: false } ); Catching pages (default: false)  $.mobile.page.prototype.options.domCache = true;  <div data-role="page” data-dom-cache="true">
  29. 29. Scripting pages pageinit = DOM ready Changing page
  30. 30. Scripting pages Scrolling to a position within a page Passing parameters between pages  page params plugin  jQuery Mobile router plugin  localStorage or sessionStorage
  31. 31. Theme http://jquerymobile.com/demos/1.2.0/docs/pages/pages -themes.html
  32. 32. Toolbars
  33. 33. Toolbars Toolbar page elements are used for headers and footers throughout many mobile sites and applications. These scroll with the page by default, but can have fixed positioning and be persistent across pages. jQuery Mobile also provides a navbar component that can be used within any toolbar or the page content.
  34. 34. Header bars
  35. 35. Header bars Adding Back buttons  Add data-add-back-btn="true” in page div.  Add data-rel="back” in anchor.
  36. 36. Footer bars
  37. 37. Footer bars Fixed & Persistent footers  Add data-position="fixed” in footer bar div.
  38. 38. Nav bars
  39. 39. Nav bars
  40. 40. Nav bars Icons in navbars  Add data-icon in nav bars.  Set the position by data-iconpos="top” (left, right, bottom)
  41. 41. Buttons
  42. 42. Buttons Buttons are core widgets in jQuery Mobile, and are used within a wide range of other plugins. The button markup is flexible and can be created from links or form buttons. Each button has a range of styling options including icons and positioning, inline and mini sizing, grouping sets, and theming.
  43. 43. Buttons q
  44. 44. Buttons Buttons support data-icon and data-iconpos.  http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons -icons.html Inline buttons
  45. 45. Buttons Grouped buttons  Vertical  Horizontal  Add data-type="horizontal"
  46. 46. Content Formatting
  47. 47. Content Formatting Layout grids  two-column (using the ui-grid-a class)  three-column (using the ui-grid-b class)  four-column (using the ui-grid-c class)  five-column (using the ui-grid-d class)
  48. 48. Content Formatting Layout grids  Buttons  Toolbars
  49. 49. Content Formatting Collapsible content  Add data-role="collapsible”.  Closed  Opened
  50. 50. Content Formatting Collapsible support data-icon and data-iconpos Collapsible content  To expanding collapsibles on load, add data- collapsed="false” Non-inset collapisibles  Add data-inset=“false”
  51. 51. Content Formatting Collapsible content  Programmatically close collapsible content  $( ".selector" ).trigger( "collapse" );  Programmatically open collapsible content  $( ".selector" ).trigger( "expand" ); Custom icons  data-collapsed-icon  data-expanded-icon  data-iconpos
  52. 52. Content Formatting Collapsible set (accordion)
  53. 53. Content Formatting Collapsible set (accordion)
  54. 54. Content Formatting Collapsible set (accordion)  If the collapsible has been update by script, use $( ".selector" ).collapsibleset( "refresh" );
  55. 55. Forms
  56. 56. Forms All form widgets begin with native form elements with rich HTML semantics that are enhanced to make them more attractive and easy to use. In browsers that dont support the custom controls, they will still have a usable experience. Most common form elements are included: text inputs, search, sliders, flip toggle switches, radio buttons, checkboxes, and select menus. Available in standard and mini sized versions.
  57. 57. Forms Forms  <form action="form.php" method="post"> ... </form> Mini sized elements  <input type="text" name="name" id="basic" data- mini="true" /> Labels  All elements need to pair with label, but you can hide the label using class="ui-hidden-accessible”.
  58. 58. Forms Disable element  Add ui-disabled class to disable elements. Field containers
  59. 59. Forms Refresh elements
  60. 60. Forms Use the original form element.  Add data-role="none"
  61. 61. Text inputs & Textareas Example 1 Example 2
  62. 62. Text inputs & Textareas Input type support list  Text  Password  Number  Number + pattern  Email  Url  Tel  Time  Date  Month  Week  Datetime  Datetime local  Color
  63. 63. Text inputs & Textareas Disable a textinput  $(.selector).textinput(disable); (enable)
  64. 64. Text inputs & Textareas Textarea
  65. 65. Search input Add input type=“search”
  66. 66. Slider Add input type=“range”
  67. 67. Slider Available parameter  step  data-highlight="true” Programmatically control slider  $(input).slider(); (enable, disable, refresh)
  68. 68. Flip toggle switch A binary selector Programmatically control flip toggle switch  $(select).slider();
  69. 69. Flip toggle switch Loner labels
  70. 70. Radio buttons
  71. 71. Radio buttons Horizontal radio buttons Programmatically control radio buttons  $("input[type=radio]").checkboxradio(); (enable, disable, refresh)
  72. 72. Checkboxes
  73. 73. Checkboxes Contain checkboxes in <fieldset data- role="controlgroup">
  74. 74. Checkboxes Add data-type="horizontal” in fieldset Programmatically control checkboxes  $("input[type=checkbox]").checkboxradio(); (enable, disable, refresh)
  75. 75. Select menus
  76. 76. Select menus Support optgroup <optgroup label="FedEx"> <option value="firstOvernight">First Overnight</option> <option value="expressSaver">Express Saver</option> <option value="ground">Ground</option> </optgroup>
  77. 77. Selected menus Add <fieldset data-role="controlgroup">  Vertical menus  Horizontal menus: data-type="horizontal"
  78. 78. Select menus To use custom menus, add the data-native- menu="false”  Support multiple="multiple”, optgroup
  79. 79. Select menus Programmatically control select menus  $(select).selectmenu();  enable  disable  open (custom menus only)  close  refresh
  80. 80. Listviews
  81. 81. Listviews Lists are used for data display, navigation, result lists, and data entry so jQuery Mobile includes a wide range of list types and formatting examples to cover most common design patterns. All lists start with simple HTML list markup and include styling for read- only, linked, numbered, nested, collapsible lists and more. Listviews are full width by default but can be set to be inset styled. To make development easy, there are simple ways to add a search filter and automatic dividers.
  82. 82. Basic listview Add data-role=“listview” in ul. Programmatically control listviews  $(.selector).listview(refresh);
  83. 83. Nested list http://jquerymobile.com/demos/1.2.0/docs/lists/lists- nested.html
  84. 84. Numbered list
  85. 85. Split button list
  86. 86. List dividers
  87. 87. List dividers Auto generate list dividers  Add data-autodividers="true” in ul.
  88. 88. Count bubble
  89. 89. Thumbnails
  90. 90. Icons
  91. 91. List formatting
  92. 92. Inset list Add data-inset="true” in ul.
  93. 93. Search filter bar Add data-filter=“true” in ul.  http://jquerymobile.com/demos/1.2.0/docs/lists/lists- search.html
  94. 94. Search filter bar To search hidden data in list  Add data-filtertext=“some text” in li.
  95. 95. Readonly lists
  96. 96. Collapsible lists Add data-role="collapsible” to the parent of ul.
  97. 97. API
  98. 98. Configuring default
  99. 99. Configuring default Configurable options  activePageClass, string, default: "ui-page-active”  defaultDialogTransition, string, default: pop‟  defaultPageTransition, string, default: fade‟  pushStateEnabled, boolean, default: true
  100. 100. Touch events $(“.target”).bind(“tap”,function() {}); tap taphold swipe swipeleft swiperight
  101. 101. Orientation change event $(document).bind(“orientationchange”, function(event) {});  Return event.orientation = portrait or landscape To use original resize javascript function  $.mobile.orientationChangeEnabled = false
  102. 102. Page load events $(document).bind(“pagebeforeload”, function() {}); pagebeforeload pageload pageloadfailed
  103. 103. Page change events $(document).bind(“pagebeforechange”, function() {}); pagebeforechange pagechange pagechangefailed
  104. 104. Page transition events $(document).bind(“pagebeforeshow”, function() {}); pagebeforeshow pagebeforehide pageshow pagehide
  105. 105. Page initialization events $(document).bind(“pagebeforecreate”, function() {}); pagebeforecreate pagecreate pageinit
  106. 106. Page remove events $(document).bind(“pageremove”, function() {}); pageremove
  107. 107. Methods $.mobile.changePage()
  108. 108. Methods $.mobile.loadPage()
  109. 109. Methods $.mobile.path.parseUrl(url)
  110. 110. Themes framework ThemeRoller  http://jquerymobile.com/themeroller/

×