1. jQuery Mobile Tutorial
2013/02/05
Mowd Chen

2.  jQuery Mobile
 Introduction
 Components
 API

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. 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. 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. Quick start: basic page

7. Quick start: listview

8. Quick start: slider

9. Quick start: button

10. Page & dialogs

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. Single page

15. Multi-page

17. Multi-page
 http://jquerymobile.com/demos/1.2.0/docs/pages/multip
age-template.html

18. 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:

19. Linking page

21. Linking page
 http://jquerymobile.com/demos/1.2.0/docs/pages/page-
links.html

22. Page transitions
 http://jquerymobile.com/demos/1.2.0/docs/pages/page-
transitions.html

23. Page transitions
 Custom the link transition
 Change the default transitions.
 Ex: $.mobile.defaultDialogTransition = „slide‟;

24. Page Loading Widget
 Deprecated
 $.mobile.loadingMessage
 $.mobile.loadingMessageTextVisible
 $.mobile.loadingMessageTheme
 $.mobile.showPageLoadingMsg()
 $.mobile.hidePageLoadingMsg()

25. Page Loading Widget

26. Dialog
<a href="foo.html" data-rel="dialog">Open dialog</a>

27. Dialog
 Transitions
 data-transition="pop”
 Open Dialog
 $(".selector”).dialog({ overlayTheme: "e" });
 Close dialog
 $('.selector').dialog('close');

28. Popup
 http://jquerymobile.com/demos/1.2.0/docs/pages/popup
/index.html

29. Popup
 Transitions
 data-transition="flip”
 Open popup
 $( "#myPopupDiv" ).popup( "open" );
 Close popup
 $( "#myPopupDiv" ).popup( "close" );

30. 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">

31. Popup
 Theme
 <div id="both" data-role="popup" data-theme="e" data-
overlay-theme="a" class="ui-content">

32. 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">

33. Scripting pages
 pageinit = DOM ready
 Changing page

34. Scripting pages
 Scrolling to a position within a page
 Passing parameters between pages
 page params plugin
 jQuery Mobile router plugin
 localStorage or sessionStorage

35. Theme
 http://jquerymobile.com/demos/1.2.0/docs/pages/pages
-themes.html

36. Toolbars

37. 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.

38. Header bars

39. Header bars
 Adding Back buttons
 Add data-add-back-btn="true” in page div.
 Add data-rel="back” in anchor.

40. Footer bars

41. Footer bars
 Fixed & Persistent footers
 Add data-position="fixed” in footer bar div.

42. Nav bars

43. Nav bars

44. Nav bars
 Icons in navbars
 Add data-icon in nav bars.
 Set the position by data-iconpos="top” (left, right, bottom)

45. Buttons

46. 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.

47. Buttons
 q

48. Buttons
 Buttons support data-icon and data-iconpos.
 http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons
-icons.html
 Inline buttons

49. Buttons
 Grouped buttons
 Vertical
 Horizontal
 Add data-type="horizontal"

50. Content Formatting

51. 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)

52. Content Formatting
 Layout grids
 Buttons
 Toolbars

53. Content Formatting
 Collapsible content
 Add data-role="collapsible”.
 Closed
 Opened

54. 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”

55. 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

56. Content Formatting
 Collapsible set (accordion)

57. Content Formatting
 Collapsible set (accordion)

58. Content Formatting
 Collapsible set (accordion)
 If the collapsible has been update by script, use
$( ".selector" ).collapsibleset( "refresh" );

59. Forms

60. 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 don't
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.

61. 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”.

62. Forms
 Disable element
 Add ui-disabled class to disable elements.
 Field containers

63. Forms
 Refresh elements

64. Forms
 Use the original form element.
 Add data-role="none"

65. Text inputs & Textareas
 Example 1
 Example 2

66. Text inputs & Textareas
 Input type support list
 Text
 Password
 Number
 Number + pattern
 Email
 Url
 Tel
 Time
 Date
 Month
 Week
 Datetime
 Datetime local
 Color

67. Text inputs & Textareas
 Disable a textinput
 $('.selector').textinput('disable'); (enable)

68. Text inputs & Textareas
 Textarea

69. Search input
 Add input type=“search”

70. Slider
 Add input type=“range”

71. Slider
 Available parameter
 step
 data-highlight="true”
 Programmatically control slider
 $('input').slider(); (enable, disable, refresh)

72. Flip toggle switch
 A binary selector
 Programmatically control flip toggle switch
 $('select').slider();

73. Flip toggle switch
 Loner labels

74. Radio buttons

75. Radio buttons
 Horizontal radio buttons
 Programmatically control radio buttons
 $("input[type='radio']").checkboxradio();
(enable, disable, refresh)

76. Checkboxes

77. Checkboxes
 Contain checkboxes in <fieldset data-
role="controlgroup">

78. Checkboxes
 Add data-type="horizontal” in fieldset
 Programmatically control checkboxes
 $("input[type='checkbox']").checkboxradio(); (enable,
disable, refresh)

79. Select menus

80. 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>

81. Selected menus
 Add <fieldset data-role="controlgroup">
 Vertical menus
 Horizontal menus: data-type="horizontal"

82. Select menus
 To use custom menus, add the data-native-
menu="false”
 Support multiple="multiple”, optgroup

83. Select menus
 Programmatically control select menus
 $('select').selectmenu();
 enable
 disable
 open (custom menus only)
 close
 refresh

84. Listviews

85. 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.

86. Basic listview
 Add data-role=“listview” in ul.
 Programmatically control listviews
 $('.selector').listview('refresh');

87. Nested list
 http://jquerymobile.com/demos/1.2.0/docs/lists/lists-
nested.html

88. Numbered list

89. Split button list

90. List dividers

91. List dividers
 Auto generate list dividers
 Add data-autodividers="true” in ul.

92. Count bubble

93. Thumbnails

94. Icons

95. List formatting

96. Inset list
 Add data-inset="true” in ul.

97. Search filter bar
 Add data-filter=“true” in ul.
 http://jquerymobile.com/demos/1.2.0/docs/lists/lists-
search.html

98. Search filter bar
 To search hidden data in list
 Add data-filtertext=“some text” in li.

99. Readonly lists

100. Collapsible lists
 Add data-role="collapsible” to the parent of ul.

101. API

102. Configuring default

103. Configuring default
 Configurable options
 activePageClass, string, default: "ui-page-active”
 defaultDialogTransition, string, default: 'pop‟
 defaultPageTransition, string, default: 'fade‟
 pushStateEnabled, boolean, default: true

104. Touch events
 $(“.target”).bind(“tap”,function() {});
 tap
 taphold
 swipe
 swipeleft
 swiperight

105. Orientation change event
 $(document).bind(“orientationchange”, function(event)
{});
 Return event.orientation = portrait or landscape
 To use original resize javascript function
 $.mobile.orientationChangeEnabled = false

106. Page load events
 $(document).bind(“pagebeforeload”, function() {});
 pagebeforeload
 pageload
 pageloadfailed

107. Page change events
 $(document).bind(“pagebeforechange”, function() {});
 pagebeforechange
 pagechange
 pagechangefailed

108. Page transition events
 $(document).bind(“pagebeforeshow”, function() {});
 pagebeforeshow
 pagebeforehide
 pageshow
 pagehide

109. Page initialization events
 $(document).bind(“pagebeforecreate”, function() {});
 pagebeforecreate
 pagecreate
 pageinit

110. Page remove events
 $(document).bind(“pageremove”, function() {});
 pageremove

111. Methods
 $.mobile.changePage()

112. Methods
 $.mobile.loadPage()

113. Methods
 $.mobile.path.parseUrl(url)

114. Themes framework
 ThemeRoller
 http://jquerymobile.com/themeroller/