Introduction to
jQuery Mobile
What is jQuery Mobile?
- Mobile framework using jQuery (obviously).
- Aggresively cross-browser, cross-platform.
- Create web apps that feel as close to native as possible.
- Markup driven, minimal code required to get up and running.
- Focused on progressive enhancement, graceful degradation.
Targeted Platforms
- iOS, Android, Windows Mobile
- Blackberry, Symbian, webOS
- Firefox Mobile (Fennec), Opera Mobile / Mini
- Meego, bada, Maemo...
- Phonegap!
Basic Page Elements
- Custom elements declared using DIVs with 'data-role' attributes
- At least one 'data-role="page"' element.
- Inside the page, at least one 'data-role="content"' element.
- Classes are added automatically.
- Form elements and lists are automatically enhanced.
Basic Page Markup
<!doctype html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.js"></script>
<script src="jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Virtual Pages
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<a href="#page2" data-role="button">Go to Page 2</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
<a href="#page1" data-role="button">Go to Page 1</a>
</div>
</div>
Separate Pages with AJAX Loading
<div data-role="page">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<a href="page2.html" data-role="button">Go to Page 2</a>
</div>
</div>
Fixed Footer Navigation
<div data-role="footer" data-id="myfooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer.html" class="ui-btn-active">One</a></li>
<li><a href="footer2.html">Two</a></li>
<li><a href="footer3.html">Three</a></li>
</ul>
</div>
</div>
// Second page
<div data-role="footer" data-id="myfooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer.html">One</a></li>
<li><a href="footer2.html" class="ui-btn-active">Two</a></li>
<li><a href="footer3.html">Three</a></li>
</ul>
</div>
</div>
// Third page
<div data-role="footer" data-id="myfooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer.html">One</a></li>
<li><a href="footer2.html">Two</a></li>
<li><a href="footer3.html" class="ui-btn-active">Three</a></li>
</ul>
</div>
</div>
AJAX Loading In Depth
- Every page must fit the jQuery Mobile standard.
- Pages are injected into the DOM with a transition if AJAX is supported, otherwise a regular page load occurs.
- If the page fails to load, the user receives a friendly, themed error message.
- When linking to a non-mobile page on the same domain, use rel="external".
- Links to different domains are detected automatically, triggering a regular load.
Form Elements
- Regular form elements are automatically enhanced for mobile usability.
- All controls gracefully degrade to their native equivalents.
- Default settings can be changed to meet your needs.
Form Element Markup
<div data-role="fieldcontain">
<label for="textbox">Textbox:</label>
<input type="text" name="textbox" id="textbox" value="" />
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea name="textarea" id="textarea" value=""></textarea>
</div>
<div data-role="fieldcontain">
<label for="search">Search:</label>
<input type="search" name="search" id="search" value="" />
</div>
<div data-role="fieldcontain">
<label for="slider">Slider:</label>
<select name="slider" id="slider" data-role="slider">
<option value="0">Off</option>
<option value="1">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="range">Range:</label>
<input type="range" name="range" value="0" min="0" max="10" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Checklist:</legend>
<input type="checkbox" name="checkbox1" id="checkbox1" />
<label for="checkbox1">HTML</label>
<input type="checkbox" name="checkbox2" id="checkbox2" />
<label for="checkbox2">CSS</label>
<input type="checkbox" name="checkbox3" id="checkbox3" />
<label for="checkbox3">JavaScript</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Horizontal Checklist:</legend>
<input type="checkbox" name="checkbox4" id="checkbox4" />
<label for="checkbox4">Tea</label>
<input type="checkbox" name="checkbox5" id="checkbox5" />
<label for="checkbox5">Coffee</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Radio Buttons:</legend>
<input type="radio" name="radio1" id="radio1a" value="a" />
<label for="radio1a">HTML5</label>
<input type="radio" name="radio1" id="radio1b" value="b" />
<label for="radio1b">Flash</label>
<input type="radio" name="radio1" id="radio1c" value="c" />
<label for="radio1c">Silverlight</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Horizontal Radio Buttons:</legend>
<input type="radio" name="radio2" id="radio2a" value="a" />
<label for="radio2a">Tea</label>
<input type="radio" name="radio2" id="radio2b" value="b" />
<label for="radio2b">Coffee</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select1" class="select">Standard Select:</label>
<select name="select1" id="select1">
<option value="1">HTML5</option>
<option value="2">Flash</option>
<option value="3">Silverlight</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="select2" class="select">Custom Select:</label>
<select name="select2" id="select2" data-native-menu="false">
<option value="1">HTML5</option>
<option value="2">Flash</option>
<option value="3">Silverlight</option>
</select>
</div>
<button name="button" name="button">Button</button>
<button type="submit" name="submit">Submit</button>
List View Markup
<h4>Basic List View</h4>
<ul data-role="listview" data-inset="true">
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
<h4>Linked List View</h4>
<ul data-role="listview" data-inset="true">
<li><a href="target.html">HTML</a></li>
<li><a href="target.html">JavaScript</a></li>
<li><a href="target.html">CSS</a></li>
</ul>
<h4>Ordered List View</h4>
<ol data-role="listview" data-inset="true">
<li><a href="target.html">HTML</a></li>
<li><a href="target.html">JavaScript</a></li>
<li><a href="target.html">CSS</a></li>
</ol>
<h4>Nested List View</h4>
<ul data-role="listview" data-inset="true">
<li>
iOS
<ul data-role="listview" data-inset="true">
<li><a href="target.html">v2.2.1</a></li>
<li><a href="target.html">v3.1.3, v3.2</a></li>
<li><a href="target.html">v4.0</a></li>
</ul>
</li>
<li>
Android
<ul data-role="listview" data-inset="true">
<li><a href="target.html">v1.5, v1.6</a></li>
<li><a href="target.html">v2.1</a></li>
<li><a href="target.html">v2.2</a></li>
</ul>
</li>
<li>
Windows Mobile
<ul data-role="listview" data-inset="true">
<li><a href="target.html">v6.1</a></li>
<li><a href="target.html">v6.5.1</a></li>
<li><a href="target.html">v7.0</a></li>
</ul>
</li>
</ul>
<h4>Searchable List View</h4>
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="target.html">HTML</a></li>
<li><a href="target.html">JavaScript</a></li>
<li><a href="target.html">CSS</a></li>
</ul>
<h4>Split Button List View</h4>
<ul data-role="listview" data-inset="true">
<li>
<a href="target.html">HTML</a>
<a href="options.html" data-icon="gear">Options</a>
</li>
<li>
<a href="target.html">JavaScript</a>
<a href="options.html" data-icon="gear">Options</a>
</li>
<li>
<a href="target.html">CSS</a>
<a href="options.html" data-icon="gear">Options</a>
</li>
</ul>
<h4>Thumbnail List View</h4>
<ul data-role="listview">
<li>
<a href="target.html">
<img src="thumbnail1.jpg" />
<h3>Miles Davis</h3>
<p>Kind of Blue<p>
</a>
</li>
<li>
<a href="target.html">
<img src="thumbnail2.jpg" />
<h3>Cannonball Adderley</h3>
<p>Somethin' Else</p>
</a>
</li>
<li>
<a href="target.html">
<img src="thumbnail3.jpg" />
<h3>Charles Mingus</h3>
<p>The Black Saint and the Sinner Lady</p>
</a>
</li>
</ul>
So where's the JavaScript?
- Oh yeah, I almost forgot.
New Events!
- User events: tap, taphold, swipe, swipeleft, swiperight, orientationchange, scrollstart, scrollstop.
- Page events: pagebeforeshow, pagebeforehide, pageshow, pagehide.
- $(document).ready()?: pagebeforecreate, pagecreate.
New Functions!
- $.mobile.changePage(options)
- $.fn.listview(), $.fn.selectmenu() etc...
- $.fn.listview('refresh'), $.fn.selectmenu('refresh') etc...
- $.fn.jqmData(), $.fn.jqmRemoveData(), and $.fn.jqmHasData()
- $.mobile.pageLoading(bool)
Show or, if bool is false, hide loading indicator.
- $.mobile.silentScroll(y)
- $.mobile.media() - Run cross-browser media queries!
Responsive Layout HTML Classes
- .portrait and .landscape classes.
- .min-width-x and .max-width-x classes
(x == 320, 480, 768 and 1024)
- Create custom width breakpoints with $.mobile.addResolutionBreakpoints()