Jquery Mobile Cross Platform Mobile Web Development HTML5
Content
Building with jQuery Mobile
Boston PHP - February 9, 2011
Scott Jehl + Todd Parker
1
Hello.
jQuery Mobile
2
We're from Filament Group.
We design engaging user interfaces for web applications, mobile devices and touchscreen kiosks that are simple and accessible to everyone.
jQuery Mobile
3
We're from Filament Group.
Authors of
jQuery Mobile
4
We're from Filament Group.
Design Team Leads
jQuery Mobile
5
We're from Filament Group.
Design & Dev Leads (and sponsor)
jQuery Mobile
6
...speaking of sponsors
jQuery Mobile
7
The challenge we face
John Resig hath spoken
jQuery Mobile
8
History repeats itself
=
jQuery Mobile
9
1.82 billion
web-enabled mobiles by 2013
jQuery Mobile
10
Device/browser diversity
30 22.5 15 7.5 0
Opera iPod Touch
Global Mobile Browser Use
iPhone NetFront
Nokia Samsung
Blackberry UCWEB
Android Other
http://gs.statcounter.com/#mobile_os-ww-monthly-200911-201011-bar
jQuery Mobile
11
US breakdown
http://www.quirksmode.org/blog/archives/2011/01/mobile_browser_2.html
jQuery Mobile
12
Global mobile browsers
http://www.quirksmode.org/blog/archives/2011/01/mobile_browser_1.html
jQuery Mobile
13
"Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network."
Tim Berners-Lee in Technology Review, July 1996
jQuery Mobile
14
different contexts, same expectations
jQuery Mobile
15
Goals, philosophy, & approach
Unified system, Universal access, Easy development
jQuery Mobile
16
Unified mobile experience
jQuery Mobile
17
Touch UI framework Built on jQuery core
Mobile + Tablet UI Desktop UI
Tools + utilities
jQuery Mobile
18
One codebase, All mobile platforms
jQuery Mobile
19
Familiar API, tight filesize
jquery.min.js
27kb ~15kb
jQuery Mobile
20
jquery.mobile.min.js
Branded experiences
http://www.bbc.co.uk/1xtra/touch/ http://m.goba.mobi/ http://m.niteowl.us/
jQuery Mobile
21
Theme framework
jQuery Mobile
22
Accessible
jQuery Mobile
23
Built on HTML
+ progressive enhancement
jQuery Mobile
24
Embrace the web
Back button works
Bookmark / Refresh Friendly URLS
jQuery Mobile
25
Multiple input mechanisms
Touch & Mouse Events
Mouse Events
jQuery Mobile
26
Native apps?
jQuery Mobile
27
Sure.
(but not our primary focus)
jQuery Mobile
28
Native to the web
The OS isn’t the medium
jQuery Mobile
29
Supported now
iOS
Android
Blackberry 6
WebOS
jQuery Mobile
30
Coming by beta
Blackberry 5
Symbian
Win Phone 7
jQuery Mobile
31
Usable everywhere
jQuery Mobile
32
Getting started
jQuery Mobile step-by-step
jQuery Mobile
33
Anatomy of a page
jQuery Mobile
34
HTML 5 document
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery Mobile Page</title> </head> <body> </body> </html>
jQuery Mobile
35
jQuery, Mobile + Theme CSS
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery Mobile Page</title> <link rel="stylesheet" href="/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="/jquery-1.5.min.js"></script> <script type="text/javascript" src="/jquery.mobile-1.0a3.min.js"></ script> </head>
jQuery Mobile
36
Use the CDN
<link rel="stylesheet" href="http:// code.jquery.com/mobile/1.0a3/ jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http:// code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="http:// code.jquery.com/mobile/1.0a3/ jquery.mobile-1.0a3.min.js"></script>
jQuery Mobile
37
data-role="page"
<body> <div data-role="page"> <!-- jQuery Mobile page content goes here --> </div><!-- /page --> </body>
jQuery Mobile
38
Page data-roles
header
content
footer
jQuery Mobile
39
Page data-roles
<body> <div data-role="page"> <div data-role="header"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer"> </div><!-- /footer --> </div><!-- /page --> </body>
jQuery Mobile
40
Simple content
<body> <div data-role="page"> <div data-role="header"> <h1>Welcome</h1> </div><!-- /header --> <div data-role="content"> <p>Hello world</p> </div><!-- /content --> </div><!-- /page --> </body>
jQuery Mobile
41
jQuery Mobile
42
Basic list
<div data-role="content"> <p>Hello world</p> <ul> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> </div><!-- /content -->
jQuery Mobile
43
jQuery Mobile
44
Add listview role
<div data-role="content"> <p>Hello world</p> <ul data-role="listview" data-inset="true"> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> </div><!-- /content -->
jQuery Mobile
45
jQuery Mobile
46
Link each item
<div data-role="content"> <p>Hello world</p> <ul data-role="listview" data-inset="true"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="about.html">About us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!-- /content -->
jQuery Mobile
47
jQuery Mobile
48
Theming
jQuery Mobile
49
Theme swatches
jQuery Mobile
50
data-theme swatch
<div data-role="content" data-theme="a"> <p>Hello world</p> <ul data-role="listview" data-inset="true" data-theme="b"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="about.html">About us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!-- /content -->
jQuery Mobile
51
jQuery Mobile
52
Page linking
jQuery Mobile
53
External page links
<div data-role="content" data-theme="a"> <p>Hello world</p> <ul data-role="listview" data-inset="true" datatheme="b"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="about.html">About us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!-- /content -->
jQuery Mobile
54
Meaningful URLs
Supports back button history, deep linking & bookmarking
jQuery Mobile
55
Coming soon: pushState
http://example.com/test.html#products.html
http://example.com/products.html
jQuery Mobile
56
Multi-page Documents
jQuery Mobile
57
Each "page" has a unique ID
<body> <div data-role="page" id="home"> </div><!-- /home page --> <div data-role="page" id="products"> </div><!-- /products page --> <div data-role="page" id="services"> </div><!-- /home page --> <div data-role="page" id="about"> </div><!-- /home page --> <div data-role="page" id="contact"> </div><!-- /home page --> </body>
jQuery Mobile
58
...with internal #anchor links
<div data-role="content" data-theme="a"> <p>Hello world</p> <ul data-role="listview" data-inset="true" datatheme="b"> <li><a href="#products">Products</a></li> <li><a href="#services">Services</a></li> <li><a href="#about">About us</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!-- /content -->
jQuery Mobile
59
Multi-page local model
Index.html #home.ui-page-active
#product
#services
#about
#contact
jQuery Mobile
60
rel="external"
<a href="multi.html" rel="external">Multi</a>
* Required if linking TO a multi-page file to avoid hash namespace collisions
jQuery Mobile
61
Change Pages via jQuery
$.mobile.changePage( "about/us.html" );
jQuery Mobile
62
...and back!
window.history.back();
jQuery Mobile
63
Transitions
jQuery Mobile
64
data-transition="pop"
jQuery Mobile
65
data-direction="reverse"
<a href="index.html" data-transition="pop" data-direction="reverse">Home</a>
jQuery Mobile
66
Transitions via jQuery
$.mobile.changePage( "about.html", "flip" );
jQuery Mobile
67
Dialogs
jQuery Mobile
68
data-rel="dialog"
<a href="products.html" data-rel="dialog">Home</a>
jQuery Mobile
69
data-rel="dialog"
normal link
jQuery Mobile
70
Same transition attribute
<a href="products.html" data-rel="dialog" data-transition="flip">Open dialog</a>
jQuery Mobile
71
jQuery Mobile
72
Closing dialogs
<a href="index.html" data-rel="back">Done</a>
or via JS... $('.ui-dialog').dialog('close') or even... window.history.back();
jQuery Mobile
73
Dialogs = Not in history
...but dialogs can be closed with back button
jQuery Mobile
74
Buttons
jQuery Mobile
75
Link styled as a button
<a href="index.html" data-role="button">Link button</a>
jQuery Mobile
76
Other markup options
jQuery Mobile
77
Icons
<a href="delete-confirm.html" data-icon="delete">Delete</a>
jQuery Mobile
78
Icon position
data-iconpos="left" data-iconpos="right"
data-iconpos="top"
data-iconpos="bottom" data-iconpos="no text"
jQuery Mobile
79
Button groups
<div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>
jQuery Mobile
80
Horizontal groups
<div data-role="controlgroup" data-type="horizontal">
jQuery Mobile
81
Inline buttons
<div data-inline="true"> <a href="index.html" data-role="button">Cancel</a> <a href="index.html" data-role="button" data-theme="b">Save</a> </div>
jQuery Mobile
82
Theme inheritance
jQuery Mobile
83
Toolbars
jQuery Mobile
84
Header bar
Links in header are automatically turned into buttons
<div data-role="header"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="index.html" data-icon="check" data-theme="b">Save</a> </div>
jQuery Mobile
85
Auto back button
Disable with data-backbtn="false"
<div data-role="header"> <h1>Page Title</h1> </div>
jQuery Mobile
86
Custom back button
<div data-role="header"> <a href="index.html" data rel="back" data-direction="reverse" dataicon="arrow-l">Back</a> <h1>Page Title</h1> </div>
jQuery Mobile
87
Footer
<div data-role="footer"> <a href="index.html" data-role="button" <a href="index.html" data-role="button" <a href="index.html" data-role="button" <a href="index.html" data-role="button" </div>
data-icon="delete">Remove</a> data-icon="plus">Add</a> data-icon="arrow-u">Up</a> data-icon="arrow-d">Down</a>
jQuery Mobile
88
Navbar
<div data-role="navbar"> <ul> <li><a href="a.html" class="ui-btn-active">One</a></li> <li><a href="b.html">Two</a></li> </ul> </div><!-- /navbar -->
jQuery Mobile
89
Navbar with icons
jQuery Mobile
90
data-position="fixed"
jQuery Mobile
91
data-fullscreen="true"
jQuery Mobile
92
Persistent footer
jQuery Mobile
93
Listviews
jQuery Mobile
94
Basic listview markup
<ul data-role="listview"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> </ul>
jQuery Mobile
95
Unordered lists (UL)
jQuery Mobile
96
Ordered lists (OL)
jQuery Mobile
97
Nested lists = Drillable pages
jQuery Mobile
98
Split button lists
<li> <img src="images/album-bb.jpg" /> <h3><a href="bb-detail.html">Broken Bells</a></h3> <p>Broken Bells</p> <a href="bb-purchase.html" data-rel="dialog">Purchase album</a> </li>
jQuery Mobile
99
Icons + count bubbles
<li> <img src="images/gf.png" alt="France" class="ui-li-icon"> <a href="france/">France</a> <span class="ui-li-count">4</span> </li>
jQuery Mobile
100
List dividers
<li data-role="list-divider">A</li>
jQuery Mobile
101
Filter bar
<ul data-filter="true">
jQuery Mobile
102
Inset style
Inset Default
<ul data-inset="true">
jQuery Mobile
103
Adding Listview Items
jQuery Mobile
104
Append, then Refresh!
$( “ul#people” ). .append( “<li><a href=’...’>Joey</a></li>” ).listview( “refresh” );
jQuery Mobile
105
List theming
data-theme="a" data-icon="none" data-dividertheme="b" data-counttheme="c" data-splittheme="d" data-spliticon="plus"
jQuery Mobile
106
Forms
jQuery Mobile
107
Start with a form element
<form action="handler.php" method="post"> ... </form>
jQuery Mobile
108
Associate labels with IDs
<form action="handler.php" method="post"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /> </form>
jQuery Mobile
109
Field containers
<form action="form.php" method="post"> <div data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /> </div> </form>
jQuery Mobile
110
Auto-optimized label/input layout based on width
jQuery Mobile
111
Text input
<label for="name">Search:</label> <input type="text" id="name" value="" />
jQuery Mobile
112
type="password"
jQuery Mobile
113
type="number"
jQuery Mobile
114
type="email"
jQuery Mobile
115
type="url"
jQuery Mobile
116
type="tel"
jQuery Mobile
117
auto-grow textarea
jQuery Mobile
118
Search input
<label for="find">Search:</label> <input type="search" id="find" value="" />
jQuery Mobile
119
Search input
jQuery Mobile
120
Slider
<div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="50" min="0" max="100" /> </div>
jQuery Mobile
121
Slider
jQuery Mobile
122
Flip switch slider
<label for="switch">Flip switch:</label> <select name="switch" id="switch" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select>
jQuery Mobile
123
Flip switch slider
jQuery Mobile
124
Radio button set
<fieldset data-role="controlgroup"> <legend>Choose a pet:</legend> <input type="radio" name="r1" id="r1" value="choice-1" checked="checked" /> <label for="r1">Cat</label> <input type="radio" name="r2" id="r2" value="choice-2" <label for="r2">Dog</label> <input type="radio" name="r3" id="r3" value="choice-3" <label for="r3">Hampster</label> <input type="radio" name="r4" id="r4" value="choice-4" <label for="r4">Lizard</label> </fieldset> />
/>
/>
jQuery Mobile
125
Radio button set
jQuery Mobile
126
Horizontal set
<fieldset data-role="controlgroup" data-type="horizontal">
jQuery Mobile
127
Checkboxes too
jQuery Mobile
128
Select menu
<label for="select-choice-1">Choose shipping method:</label> <select name="select-choice-1" id="select-choice-1"> <option value="standard">Standard: 7 day</option> <option value="rush">Rush: 3 days</option> <option value="express">Express: next day</option> <option value="overnight">Overnight</option> </select>
jQuery Mobile
129
Select menu
jQuery Mobile
130
Long select menu
jQuery Mobile
131
data-native-menu="true"
jQuery Mobile
132
Placeholder option
An option with...
• No (or empty) value attribute • No text node • data-placeholder="true"
jQuery Mobile
133
More select attributes
Optgroups <optgroup label="USPS"> Disabled disabled="disabled" Multiple select multiple="multiple"
jQuery Mobile
134
Append/Set/Get Values
jQuery Mobile
135
Append, then Refresh!
$( "select#my-select" ). .append( "<option value='a'>A</option>” ).selectmenu( “refresh” );
jQuery Mobile
136
Set Value, refresh!
var mySelect = $('select#my-select'); mySelect.get(0).selectedIndex = 2; mySelect.selectmenu("refresh");
jQuery Mobile
137
Submitting forms
jQuery Mobile
138
Ajax form submission
<form action="forms-sample-response.php" method="get">
jQuery Mobile
139
Submitting via jQuery
$.mobile.changePage({ url: "data/handler.php", type: "post", data: { "shipping": "Fast!" } });
jQuery Mobile
140
Theme inheritance
data-theme="a" data-theme="b" data-theme="e"
jQuery Mobile
141
Technical bits
Oh, you want to see some JavaScript too?
jQuery Mobile
142
Events
jQuery Mobile
143
Custom Events
‣ tap ‣ taphold ‣ swipe (left/right) ‣ scroll (start/stop) ‣ orientationchange
jQuery Mobile
144
Custom Events (cont.)
“DomReady” becomes “pagecreate”
‣ page events ([before] show/hide/create) ‣ mobileinit
jQuery Mobile
145
domReady
jQuery Mobile
146
Dom Ready = pagecreate
$( "#mypage" ).live( "pagecreate", function(){ //do something! } );
jQuery Mobile
147
Responsive layout
‣ orientation: .portrait .landscape ‣ min-width-320, -480, -768, -1024 ‣ max-width-320, -480, -768, -1024 ‣ $.mobile.media()
jQuery Mobile
148
Configuring Defaults
jQuery Mobile
149
Configurable options
‣ ‣ ‣ ‣ ‣
subPageUrlKey (string, default: "ui-page") nonHistorySelectors (string, default: "dialog") activePageClass (string, default: "ui-page-active") activeBtnClass (string, default: "ui-page-active") ajaxEnabled (boolean, default: true)
jQuery Mobile
150
Configurable options
‣ ‣ ‣ ‣
defaultTransition (string, default: 'slide') loadingMessage (string, default: "loading") defaultTransition (string, default: 'slide') metaViewportContent
(string, default: "width=device-width, minimum-scale=1, maximum-scale=1")
jQuery Mobile
151
Overriding defaults
Extend the $.mobile object: $(document).bind("mobileinit", function(){ $.extend( $.mobile , { foo: bar }); }); ...or set individually: $(document).bind("mobileinit", function(){ $.mobile.foo = bar; });
jQuery Mobile
152
Overriding defaults
<script src="jquery.js"></script> <script src="defaults.js"></script> <script src="jquery-mobile.js"></script>
jQuery Mobile
153
State of the project
How it's coming along
jQuery Mobile
154
Alpha 3 just released!
jQuery Mobile
155
Some highlights
‣ 480 commits since Alpha 2!? ‣ Fixed ~150 bugs ‣ Created 240 Unit tests ‣ Increased A-Grade support ‣ Added "experimental" datepicker ‣ Lots more: http://jquerymobile.com
jQuery Mobile
156
Beta
Mid March
jQuery Mobile
157
version 1.0
Mid April*
jQuery Mobile
158
demos & docs
jquerymobile.com/demos/1.0a3/
live dev snapshot:
jquerymobile.com/test/
jQuery Mobile
159
Notable features on the way
‣ Responsive layouts for tablet & desktop ‣ History.pushstate integration ‣ More controls (spinner, datepicker, etc) ‣ Hooks for enhancing to data templating
jQuery Mobile
160
Test lab
jQuery Mobile
161
Unit tests
jQuery Mobile
162
Interesting developments...
=
jQuery Mobile
163
contribute on GitHub
github.com/jquery/jquery-mobile
jQuery Mobile
164
Build your own!
1 2 3
$ git clone git://github.com/jquery/ jquery-mobile.git $ cd jquery-mobile $ make
jQuery Mobile
165
m.bostonphp.org
Built with jQuery Mobile by your host Michael Bourque
jQuery Mobile
166
Thanks!
jQuery Mobile
167
Boston PHP - February 9, 2011
Scott Jehl + Todd Parker
1
Hello.
jQuery Mobile
2
We're from Filament Group.
We design engaging user interfaces for web applications, mobile devices and touchscreen kiosks that are simple and accessible to everyone.
jQuery Mobile
3
We're from Filament Group.
Authors of
jQuery Mobile
4
We're from Filament Group.
Design Team Leads
jQuery Mobile
5
We're from Filament Group.
Design & Dev Leads (and sponsor)
jQuery Mobile
6
...speaking of sponsors
jQuery Mobile
7
The challenge we face
John Resig hath spoken
jQuery Mobile
8
History repeats itself
=
jQuery Mobile
9
1.82 billion
web-enabled mobiles by 2013
jQuery Mobile
10
Device/browser diversity
30 22.5 15 7.5 0
Opera iPod Touch
Global Mobile Browser Use
iPhone NetFront
Nokia Samsung
Blackberry UCWEB
Android Other
http://gs.statcounter.com/#mobile_os-ww-monthly-200911-201011-bar
jQuery Mobile
11
US breakdown
http://www.quirksmode.org/blog/archives/2011/01/mobile_browser_2.html
jQuery Mobile
12
Global mobile browsers
http://www.quirksmode.org/blog/archives/2011/01/mobile_browser_1.html
jQuery Mobile
13
"Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network."
Tim Berners-Lee in Technology Review, July 1996
jQuery Mobile
14
different contexts, same expectations
jQuery Mobile
15
Goals, philosophy, & approach
Unified system, Universal access, Easy development
jQuery Mobile
16
Unified mobile experience
jQuery Mobile
17
Touch UI framework Built on jQuery core
Mobile + Tablet UI Desktop UI
Tools + utilities
jQuery Mobile
18
One codebase, All mobile platforms
jQuery Mobile
19
Familiar API, tight filesize
jquery.min.js
27kb ~15kb
jQuery Mobile
20
jquery.mobile.min.js
Branded experiences
http://www.bbc.co.uk/1xtra/touch/ http://m.goba.mobi/ http://m.niteowl.us/
jQuery Mobile
21
Theme framework
jQuery Mobile
22
Accessible
jQuery Mobile
23
Built on HTML
+ progressive enhancement
jQuery Mobile
24
Embrace the web
Back button works
Bookmark / Refresh Friendly URLS
jQuery Mobile
25
Multiple input mechanisms
Touch & Mouse Events
Mouse Events
jQuery Mobile
26
Native apps?
jQuery Mobile
27
Sure.
(but not our primary focus)
jQuery Mobile
28
Native to the web
The OS isn’t the medium
jQuery Mobile
29
Supported now
iOS
Android
Blackberry 6
WebOS
jQuery Mobile
30
Coming by beta
Blackberry 5
Symbian
Win Phone 7
jQuery Mobile
31
Usable everywhere
jQuery Mobile
32
Getting started
jQuery Mobile step-by-step
jQuery Mobile
33
Anatomy of a page
jQuery Mobile
34
HTML 5 document
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery Mobile Page</title> </head> <body> </body> </html>
jQuery Mobile
35
jQuery, Mobile + Theme CSS
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery Mobile Page</title> <link rel="stylesheet" href="/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="/jquery-1.5.min.js"></script> <script type="text/javascript" src="/jquery.mobile-1.0a3.min.js"></ script> </head>
jQuery Mobile
36
Use the CDN
<link rel="stylesheet" href="http:// code.jquery.com/mobile/1.0a3/ jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http:// code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="http:// code.jquery.com/mobile/1.0a3/ jquery.mobile-1.0a3.min.js"></script>
jQuery Mobile
37
data-role="page"
<body> <div data-role="page"> <!-- jQuery Mobile page content goes here --> </div><!-- /page --> </body>
jQuery Mobile
38
Page data-roles
header
content
footer
jQuery Mobile
39
Page data-roles
<body> <div data-role="page"> <div data-role="header"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer"> </div><!-- /footer --> </div><!-- /page --> </body>
jQuery Mobile
40
Simple content
<body> <div data-role="page"> <div data-role="header"> <h1>Welcome</h1> </div><!-- /header --> <div data-role="content"> <p>Hello world</p> </div><!-- /content --> </div><!-- /page --> </body>
jQuery Mobile
41
jQuery Mobile
42
Basic list
<div data-role="content"> <p>Hello world</p> <ul> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> </div><!-- /content -->
jQuery Mobile
43
jQuery Mobile
44
Add listview role
<div data-role="content"> <p>Hello world</p> <ul data-role="listview" data-inset="true"> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> </div><!-- /content -->
jQuery Mobile
45
jQuery Mobile
46
Link each item
<div data-role="content"> <p>Hello world</p> <ul data-role="listview" data-inset="true"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="about.html">About us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!-- /content -->
jQuery Mobile
47
jQuery Mobile
48
Theming
jQuery Mobile
49
Theme swatches
jQuery Mobile
50
data-theme swatch
<div data-role="content" data-theme="a"> <p>Hello world</p> <ul data-role="listview" data-inset="true" data-theme="b"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="about.html">About us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!-- /content -->
jQuery Mobile
51
jQuery Mobile
52
Page linking
jQuery Mobile
53
External page links
<div data-role="content" data-theme="a"> <p>Hello world</p> <ul data-role="listview" data-inset="true" datatheme="b"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="about.html">About us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!-- /content -->
jQuery Mobile
54
Meaningful URLs
Supports back button history, deep linking & bookmarking
jQuery Mobile
55
Coming soon: pushState
http://example.com/test.html#products.html
http://example.com/products.html
jQuery Mobile
56
Multi-page Documents
jQuery Mobile
57
Each "page" has a unique ID
<body> <div data-role="page" id="home"> </div><!-- /home page --> <div data-role="page" id="products"> </div><!-- /products page --> <div data-role="page" id="services"> </div><!-- /home page --> <div data-role="page" id="about"> </div><!-- /home page --> <div data-role="page" id="contact"> </div><!-- /home page --> </body>
jQuery Mobile
58
...with internal #anchor links
<div data-role="content" data-theme="a"> <p>Hello world</p> <ul data-role="listview" data-inset="true" datatheme="b"> <li><a href="#products">Products</a></li> <li><a href="#services">Services</a></li> <li><a href="#about">About us</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!-- /content -->
jQuery Mobile
59
Multi-page local model
Index.html #home.ui-page-active
#product
#services
#about
#contact
jQuery Mobile
60
rel="external"
<a href="multi.html" rel="external">Multi</a>
* Required if linking TO a multi-page file to avoid hash namespace collisions
jQuery Mobile
61
Change Pages via jQuery
$.mobile.changePage( "about/us.html" );
jQuery Mobile
62
...and back!
window.history.back();
jQuery Mobile
63
Transitions
jQuery Mobile
64
data-transition="pop"
jQuery Mobile
65
data-direction="reverse"
<a href="index.html" data-transition="pop" data-direction="reverse">Home</a>
jQuery Mobile
66
Transitions via jQuery
$.mobile.changePage( "about.html", "flip" );
jQuery Mobile
67
Dialogs
jQuery Mobile
68
data-rel="dialog"
<a href="products.html" data-rel="dialog">Home</a>
jQuery Mobile
69
data-rel="dialog"
normal link
jQuery Mobile
70
Same transition attribute
<a href="products.html" data-rel="dialog" data-transition="flip">Open dialog</a>
jQuery Mobile
71
jQuery Mobile
72
Closing dialogs
<a href="index.html" data-rel="back">Done</a>
or via JS... $('.ui-dialog').dialog('close') or even... window.history.back();
jQuery Mobile
73
Dialogs = Not in history
...but dialogs can be closed with back button
jQuery Mobile
74
Buttons
jQuery Mobile
75
Link styled as a button
<a href="index.html" data-role="button">Link button</a>
jQuery Mobile
76
Other markup options
jQuery Mobile
77
Icons
<a href="delete-confirm.html" data-icon="delete">Delete</a>
jQuery Mobile
78
Icon position
data-iconpos="left" data-iconpos="right"
data-iconpos="top"
data-iconpos="bottom" data-iconpos="no text"
jQuery Mobile
79
Button groups
<div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>
jQuery Mobile
80
Horizontal groups
<div data-role="controlgroup" data-type="horizontal">
jQuery Mobile
81
Inline buttons
<div data-inline="true"> <a href="index.html" data-role="button">Cancel</a> <a href="index.html" data-role="button" data-theme="b">Save</a> </div>
jQuery Mobile
82
Theme inheritance
jQuery Mobile
83
Toolbars
jQuery Mobile
84
Header bar
Links in header are automatically turned into buttons
<div data-role="header"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="index.html" data-icon="check" data-theme="b">Save</a> </div>
jQuery Mobile
85
Auto back button
Disable with data-backbtn="false"
<div data-role="header"> <h1>Page Title</h1> </div>
jQuery Mobile
86
Custom back button
<div data-role="header"> <a href="index.html" data rel="back" data-direction="reverse" dataicon="arrow-l">Back</a> <h1>Page Title</h1> </div>
jQuery Mobile
87
Footer
<div data-role="footer"> <a href="index.html" data-role="button" <a href="index.html" data-role="button" <a href="index.html" data-role="button" <a href="index.html" data-role="button" </div>
data-icon="delete">Remove</a> data-icon="plus">Add</a> data-icon="arrow-u">Up</a> data-icon="arrow-d">Down</a>
jQuery Mobile
88
Navbar
<div data-role="navbar"> <ul> <li><a href="a.html" class="ui-btn-active">One</a></li> <li><a href="b.html">Two</a></li> </ul> </div><!-- /navbar -->
jQuery Mobile
89
Navbar with icons
jQuery Mobile
90
data-position="fixed"
jQuery Mobile
91
data-fullscreen="true"
jQuery Mobile
92
Persistent footer
jQuery Mobile
93
Listviews
jQuery Mobile
94
Basic listview markup
<ul data-role="listview"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> </ul>
jQuery Mobile
95
Unordered lists (UL)
jQuery Mobile
96
Ordered lists (OL)
jQuery Mobile
97
Nested lists = Drillable pages
jQuery Mobile
98
Split button lists
<li> <img src="images/album-bb.jpg" /> <h3><a href="bb-detail.html">Broken Bells</a></h3> <p>Broken Bells</p> <a href="bb-purchase.html" data-rel="dialog">Purchase album</a> </li>
jQuery Mobile
99
Icons + count bubbles
<li> <img src="images/gf.png" alt="France" class="ui-li-icon"> <a href="france/">France</a> <span class="ui-li-count">4</span> </li>
jQuery Mobile
100
List dividers
<li data-role="list-divider">A</li>
jQuery Mobile
101
Filter bar
<ul data-filter="true">
jQuery Mobile
102
Inset style
Inset Default
<ul data-inset="true">
jQuery Mobile
103
Adding Listview Items
jQuery Mobile
104
Append, then Refresh!
$( “ul#people” ). .append( “<li><a href=’...’>Joey</a></li>” ).listview( “refresh” );
jQuery Mobile
105
List theming
data-theme="a" data-icon="none" data-dividertheme="b" data-counttheme="c" data-splittheme="d" data-spliticon="plus"
jQuery Mobile
106
Forms
jQuery Mobile
107
Start with a form element
<form action="handler.php" method="post"> ... </form>
jQuery Mobile
108
Associate labels with IDs
<form action="handler.php" method="post"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /> </form>
jQuery Mobile
109
Field containers
<form action="form.php" method="post"> <div data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /> </div> </form>
jQuery Mobile
110
Auto-optimized label/input layout based on width
jQuery Mobile
111
Text input
<label for="name">Search:</label> <input type="text" id="name" value="" />
jQuery Mobile
112
type="password"
jQuery Mobile
113
type="number"
jQuery Mobile
114
type="email"
jQuery Mobile
115
type="url"
jQuery Mobile
116
type="tel"
jQuery Mobile
117
auto-grow textarea
jQuery Mobile
118
Search input
<label for="find">Search:</label> <input type="search" id="find" value="" />
jQuery Mobile
119
Search input
jQuery Mobile
120
Slider
<div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="50" min="0" max="100" /> </div>
jQuery Mobile
121
Slider
jQuery Mobile
122
Flip switch slider
<label for="switch">Flip switch:</label> <select name="switch" id="switch" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select>
jQuery Mobile
123
Flip switch slider
jQuery Mobile
124
Radio button set
<fieldset data-role="controlgroup"> <legend>Choose a pet:</legend> <input type="radio" name="r1" id="r1" value="choice-1" checked="checked" /> <label for="r1">Cat</label> <input type="radio" name="r2" id="r2" value="choice-2" <label for="r2">Dog</label> <input type="radio" name="r3" id="r3" value="choice-3" <label for="r3">Hampster</label> <input type="radio" name="r4" id="r4" value="choice-4" <label for="r4">Lizard</label> </fieldset> />
/>
/>
jQuery Mobile
125
Radio button set
jQuery Mobile
126
Horizontal set
<fieldset data-role="controlgroup" data-type="horizontal">
jQuery Mobile
127
Checkboxes too
jQuery Mobile
128
Select menu
<label for="select-choice-1">Choose shipping method:</label> <select name="select-choice-1" id="select-choice-1"> <option value="standard">Standard: 7 day</option> <option value="rush">Rush: 3 days</option> <option value="express">Express: next day</option> <option value="overnight">Overnight</option> </select>
jQuery Mobile
129
Select menu
jQuery Mobile
130
Long select menu
jQuery Mobile
131
data-native-menu="true"
jQuery Mobile
132
Placeholder option
An option with...
• No (or empty) value attribute • No text node • data-placeholder="true"
jQuery Mobile
133
More select attributes
Optgroups <optgroup label="USPS"> Disabled disabled="disabled" Multiple select multiple="multiple"
jQuery Mobile
134
Append/Set/Get Values
jQuery Mobile
135
Append, then Refresh!
$( "select#my-select" ). .append( "<option value='a'>A</option>” ).selectmenu( “refresh” );
jQuery Mobile
136
Set Value, refresh!
var mySelect = $('select#my-select'); mySelect.get(0).selectedIndex = 2; mySelect.selectmenu("refresh");
jQuery Mobile
137
Submitting forms
jQuery Mobile
138
Ajax form submission
<form action="forms-sample-response.php" method="get">
jQuery Mobile
139
Submitting via jQuery
$.mobile.changePage({ url: "data/handler.php", type: "post", data: { "shipping": "Fast!" } });
jQuery Mobile
140
Theme inheritance
data-theme="a" data-theme="b" data-theme="e"
jQuery Mobile
141
Technical bits
Oh, you want to see some JavaScript too?
jQuery Mobile
142
Events
jQuery Mobile
143
Custom Events
‣ tap ‣ taphold ‣ swipe (left/right) ‣ scroll (start/stop) ‣ orientationchange
jQuery Mobile
144
Custom Events (cont.)
“DomReady” becomes “pagecreate”
‣ page events ([before] show/hide/create) ‣ mobileinit
jQuery Mobile
145
domReady
jQuery Mobile
146
Dom Ready = pagecreate
$( "#mypage" ).live( "pagecreate", function(){ //do something! } );
jQuery Mobile
147
Responsive layout
‣ orientation: .portrait .landscape ‣ min-width-320, -480, -768, -1024 ‣ max-width-320, -480, -768, -1024 ‣ $.mobile.media()
jQuery Mobile
148
Configuring Defaults
jQuery Mobile
149
Configurable options
‣ ‣ ‣ ‣ ‣
subPageUrlKey (string, default: "ui-page") nonHistorySelectors (string, default: "dialog") activePageClass (string, default: "ui-page-active") activeBtnClass (string, default: "ui-page-active") ajaxEnabled (boolean, default: true)
jQuery Mobile
150
Configurable options
‣ ‣ ‣ ‣
defaultTransition (string, default: 'slide') loadingMessage (string, default: "loading") defaultTransition (string, default: 'slide') metaViewportContent
(string, default: "width=device-width, minimum-scale=1, maximum-scale=1")
jQuery Mobile
151
Overriding defaults
Extend the $.mobile object: $(document).bind("mobileinit", function(){ $.extend( $.mobile , { foo: bar }); }); ...or set individually: $(document).bind("mobileinit", function(){ $.mobile.foo = bar; });
jQuery Mobile
152
Overriding defaults
<script src="jquery.js"></script> <script src="defaults.js"></script> <script src="jquery-mobile.js"></script>
jQuery Mobile
153
State of the project
How it's coming along
jQuery Mobile
154
Alpha 3 just released!
jQuery Mobile
155
Some highlights
‣ 480 commits since Alpha 2!? ‣ Fixed ~150 bugs ‣ Created 240 Unit tests ‣ Increased A-Grade support ‣ Added "experimental" datepicker ‣ Lots more: http://jquerymobile.com
jQuery Mobile
156
Beta
Mid March
jQuery Mobile
157
version 1.0
Mid April*
jQuery Mobile
158
demos & docs
jquerymobile.com/demos/1.0a3/
live dev snapshot:
jquerymobile.com/test/
jQuery Mobile
159
Notable features on the way
‣ Responsive layouts for tablet & desktop ‣ History.pushstate integration ‣ More controls (spinner, datepicker, etc) ‣ Hooks for enhancing to data templating
jQuery Mobile
160
Test lab
jQuery Mobile
161
Unit tests
jQuery Mobile
162
Interesting developments...
=
jQuery Mobile
163
contribute on GitHub
github.com/jquery/jquery-mobile
jQuery Mobile
164
Build your own!
1 2 3
$ git clone git://github.com/jquery/ jquery-mobile.git $ cd jquery-mobile $ make
jQuery Mobile
165
m.bostonphp.org
Built with jQuery Mobile by your host Michael Bourque
jQuery Mobile
166
Thanks!
jQuery Mobile
167
