Jquery Mobile Cross Platform Mobile Web Development HTML5 | Mobile Device | J Query

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

Sign up to vote on this title
UsefulNot useful