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