Beruflich Dokumente
Kultur Dokumente
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
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."
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
jquery.mobile.min.js ~15kb
jQuery Mobile
20
Branded experiences
jQuery Mobile
21
Theme framework
jQuery Mobile
22
Accessible
jQuery Mobile
23
Built on HTML
+ progressive enhancement
jQuery Mobile
24
Embrace the web
Bookmark / Refresh
Back button works Friendly URLS
jQuery Mobile
25
Multiple input mechanisms
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
jQuery Mobile
30
Coming by beta
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>
</head>
jQuery Mobile
36
Use the CDN
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 -->
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 -->
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>
jQuery Mobile
43
jQuery Mobile
44
Add listview role
<div data-role="content">
<p>Hello world</p>
jQuery Mobile
45
jQuery Mobile
46
Link each item
<div data-role="content">
<p>Hello world</p>
jQuery Mobile
47
jQuery Mobile
48
Theming
jQuery Mobile
49
Theme swatches
jQuery Mobile
50
data-theme swatch
jQuery Mobile
51
jQuery Mobile
52
Page linking
jQuery Mobile
53
External page links
jQuery Mobile
54
Meaningful URLs
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>
</body>
jQuery Mobile
58
...with internal #anchor links
jQuery Mobile
59
Multi-page local model
Index.html
#home.ui-page-active
jQuery Mobile
60
rel="external"
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"
jQuery Mobile
66
Transitions via jQuery
$.mobile.changePage(
"about.html",
"flip"
);
jQuery Mobile
67
Dialogs
jQuery Mobile
68
data-rel="dialog"
jQuery Mobile
69
data-rel="dialog" normal link
jQuery Mobile
70
Same transition attribute
jQuery Mobile
71
jQuery Mobile
72
Closing dialogs
or via JS...
$('.ui-dialog').dialog('close')
or even...
window.history.back();
jQuery Mobile
73
Dialogs = Not in history
jQuery Mobile
74
Buttons
jQuery Mobile
75
Link styled as a button
jQuery Mobile
76
Other markup options
jQuery Mobile
77
Icons
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
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
<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
<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" data-
icon="arrow-l">Back</a>
<h1>Page Title</h1>
</div>
jQuery Mobile
87
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>
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>
jQuery Mobile
108
Associate labels with IDs
</form>
jQuery Mobile
109
Field containers
<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
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>
jQuery Mobile
125
Radio button set
jQuery Mobile
126
Horizontal set
jQuery Mobile
127
Checkboxes too
jQuery Mobile
128
Select menu
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...
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!
mySelect.get(0).selectedIndex = 2;
mySelect.selectmenu("refresh");
jQuery Mobile
137
Submitting forms
jQuery Mobile
138
Ajax form submission
jQuery Mobile
139
Submitting via jQuery
$.mobile.changePage({
url: "data/handler.php",
type: "post",
});
jQuery Mobile
140
Theme inheritance
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.)
jQuery Mobile
145
domReady
jQuery Mobile
146
Dom Ready = pagecreate
function(){
//do something!
);
jQuery Mobile
147
Responsive layout
jQuery Mobile
148
Configuring Defaults
jQuery Mobile
149
Configurable options
jQuery Mobile
150
Configurable options
‣ metaViewportContent
(string, default: "width=device-width, minimum-scale=1, maximum-scale=1")
jQuery Mobile
151
Overriding defaults
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
foo: bar
});
});
$(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/
jQuery Mobile
159
Notable features on the way
‣ History.pushstate integration
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!
2 $ cd jquery-mobile
3 $ make
jQuery Mobile
165
m.bostonphp.org
Built with jQuery Mobile
by your host Michael Bourque
jQuery Mobile
166
Thanks!
jQuery Mobile
167