Rapidly Develop Mobile Web Applications with jQuery Mobile

@mikehostetler BlackBerry DevCon Europe 2012 Rapidly Develop Mobile Web Applications
with Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Who am I? Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 http://learn.appendto.com Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Many More ... Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 The Mobile Frontier ... Monday,
February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 7 Billion People Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Mobile is available to 90%
Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 5.3 Billion+ Active Subscriptions http://www.itu.int/ITU-D/ict/material/FactsFigures2010.pdf
- Sept, 2011 Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 7% of US Trafﬁc comes
from SmartPhones and Tablets http://www.comscore.com/Press_Events/Press_Releases/2011/10/ Smartphones_and_Tablets_Drive_Nearly_7_Percent_of_Total_U.S._Digital_Trafﬁc - Sept. 2011 Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 10+ billion by 2013 Monday,
February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Know Better ... Do Better
? Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 UPDATE! Know Better ... Do
Better Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 The is the web People
expect it to work everywhere Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 The Solution? Monday, February 13,
12

@mikehostetler BlackBerry DevCon Europe 2012 jQuery Philosophy ... Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Uniﬁed System Universal Access Easy
Development Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 One Codebase - Multiple Platforms

@mikehostetler BlackBerry DevCon Europe 2012 Desktop Too! Monday, February 13,
12

@mikehostetler BlackBerry DevCon Europe 2012 In <3 with Web Standards

@mikehostetler BlackBerry DevCon Europe 2012 Built on jQuery Core ...

@mikehostetler BlackBerry DevCon Europe 2012 Familiar API Style It’s just
jQuery! $( document ).delegate( ".city", "click", function ( e ) { $( "#dialog" ).one( "pagehide", function () { $.mobile.changePage( 'cities.php' ); }).dialog( "close" ); }); Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Small Filesize (gzipped) Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Mobile Browser Grades Basic HTML
C B A Enhanced experience without Ajax Full experience with Ajax-based animated page transitions. Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Graded Browser Support Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Doesn’t Break the Web Monday,
February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Uniﬁed Experience Monday, February 13,
12

@mikehostetler BlackBerry DevCon Europe 2012 Accessible Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Normalizes Input Paradigms Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Compiles to Native + =

@mikehostetler BlackBerry DevCon Europe 2012 The Con’s ... Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Performance Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Native Look & Feel vs.

@mikehostetler BlackBerry DevCon Europe 2012 Device API’s Monday, February 13,
12

@mikehostetler BlackBerry DevCon Europe 2012 Ofﬂine Access, sort of (
) Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 These are hard problems ...

@mikehostetler BlackBerry DevCon Europe 2012 Choose the right tool ...

@mikehostetler BlackBerry DevCon Europe 2012 Current Project Status Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Just released jQuery Mobile 1.0.1

@mikehostetler BlackBerry DevCon Europe 2012 More at http://jqmgallery.com Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Standard in Adobe CS5.5 Monday,
February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Shipping in Visual Studio Soon
... Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Lets dive in ... Monday,
February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Download the code http://jquerymobile.com/download https://github.com/jquery/jquery-mobile
or use a CDN ... Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Pages Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Your First Page! <!DocType HTML>
<html> <head> ... <title>My ﬁrst jQuery Mobile Page!</title> </head> <body> .... </body> </html> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Add the <script> tags ...
<!DocType HTML> <html> <head> .... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.js"></script> </head> .... </html> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Building your Page <body> <div
data-role=”page”> <p>Hello World!</p> </div> </body> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 The role of data attributes
... <body> <div data-role=”page”> <p>Hello World!</p> </div> </body> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Full Sample Page <body> <div
data-role=”page”> <div data-role=”header”> ... </div> <div data-role=”content”> ... </div> <div data-role=”footer”> ... </div> </div> </body> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Lists Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Basic List <div data-role=”content”> <h2>Hello
World!</h2> <ul> <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ul> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Add the List View Role
<div data-role=”content”> <h2>Hello World!</h2> <ul data-role="listview"> <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ul> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Inset Style <div data-role=”content”> <h2>Hello
World!</h2> <ul data-role="listview" data-inset="true" > <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ul> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Add Links <ul data-role="listview" data-inset="true">
<li> <a href=”http://jquery.com”> jQuery </a> </li> ... </ul> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 More Examples ... Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Ordered Lists <div data-role=”content”> <h2>Hello
World!</h2> <ol data-role="listview"> <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ol> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Nested Lists = Drillable Pages

@mikehostetler BlackBerry DevCon Europe 2012 Count Bubbles <ul data-role="listview"> <li><a
href=”http://jquery.com”> jQuery <span class="ui-li-count">1.6.4</span> </a></li> ... </ul> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 List Dividers <ul data-role="listview"> <li
data-role="list-divider">Core</li> <li>jQuery</li> <li data-role="list-divider">UI</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li data-role="list-divider">Testing</li> <li>QUnit</li> </ul> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Filter Bar <div data-role=”content”> <h2>Hello
World!</h2> <ul data-role="listview" data-ﬁlter="true"> .... </ul> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Adding List Items Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Append, then Refresh! $(‘ul#jquery’). .append(
‘<li><a href=”http://sizzlejs.com”>Sizzle JS</a></li>’ ).listview( ‘refresh’ ); Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Theming Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Basic Theming <div data-role=”page” data-theme=”a”>
<div data-role=”content”> .... </div> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Side by Side Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 ThemeRoller Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Links & Navigation Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 External Links <ul data-role="listview" data-inset="true"
data-theme=”e”> <li> <a href=”http://jquery.com”> jQuery </a> </li> ... </ul> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Internal + Hijax + DOM
Injection <ul data-role="listview" data-inset="true" data-theme=”e”> <li> <a href=”jquery.html”> jQuery </a> </li> ... </ul> Click! Monday, February 13, 12

Injection /index.html /jquery.html Monday, February 13, 12

Injection /jquery.html /index.html Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Transitions Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 External Links <ul data-role="listview" data-inset="true"
data-theme=”e”> <li> <a href=”http://jquery.com” data-transition="pop"> jQuery a’ Poppin </a> </li> ... </ul> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Multi-Page & Pre-Fetch Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Multiple Pages, One DOM <body>
<div data-role=”page” id=”page1”> <p>Hello World!</p> </div> <div data-role=”page” id=”page2”> <p>Hello World!</p> </div> </body> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Pre-Fetching <body> <div data-role=”page” id=”page1”>
<p>Hello World!</p> <a href="prefetchMe.html" data-prefetch> ... </a> </div> <div data-role=”page” id=”page2”> <p>Hello World!</p> </div> </body> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Forms Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Basic Form with Labels <div
data-role="content"> <form action="#" method="get"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </form> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Containers <div data-role="content"> <form action="#"
method="get"> <div data-role="ﬁeldcontain"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </div> </form> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Optimized for Width Changes Monday,
February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Progressive Enhancement Monday, February 13,
12

@mikehostetler BlackBerry DevCon Europe 2012 Text Input <div data-role="content"> <form
action="#" method="get"> <div data-role="ﬁeldcontain"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </div> </form> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Text Input Helpers ”password” ”email”
”tel” Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Text Area’s Grow Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Flip Switch <form action="#" method="get">
<div data-role="ﬁeldcontain"> <label for="slide">Flip switch:</label> <select name="slide" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> </div> </form> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Radio Buttons <form action="#" method="get">
<div data-role="ﬁeldcontain"> <input type="radio" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Checkboxes Too <form action="#" method="get">
<div data-role="ﬁeldcontain"> <input type="checkbox" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Horizontal Set <form action="#" method="get">
<div data-role="ﬁeldcontain" data-type=”horizontal”> <input type="checkbox" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Select Lists <form action="#" method="get">
<div data-role="ﬁeldcontain"> <label for="choice-1"> Choose shipping method:</label> <select name="choice-1"> <option value="std">Standard: 7 day </option> ... </select> </div> </form> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Select Lists - Non-Native <form
action="#" method="get"> <div data-role="ﬁeldcontain"> <label for="choice-1"> Choose shipping method:</label> <select name="choice-1" data-native-menu="false"> <option value="std">Standard: 7 day </option> ... </select> </div> </form> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Extra’s Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Dialog’s <div data-role="content"> <a href="foo.html"
data-rel="dialog">Open dialog</a> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Button’s <div data-role="content"> <a href="#"
data-role="button"> Link Button</a> <a href="#" data-role="button" data-icon="star">Star Icon!</a> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Toolbar’s <div data-role="page"> <div data-role="header"
data-position="inline"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="index.html" data-icon="check">Save</a> </div> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Navbar’s <div data-role="page"> .... <div
data-role="footer"> <div data-role="navbar"> <ul> <li>Summary</li> ... </ul> </div> </div> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Fixed Positioning <div data-role="page"> <div
data-role="header" data-position="ﬁxed"> <h1>Fixed toolbars</h1> </div> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Persistent Footer Bar <div data-role="footer">
<div data-role="navbar" class="ui-state-persist"> <p><a href=”#”>Friends</a></p> </div> </div> Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Events Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 New Events ‣tap, taphold ‣swipe,
swipeleft, swiperight ‣scrollstart, scrollstop ‣orientationchange ‣Page Load: pageloadbefore, pageload, pageloadfailed ‣Page Change: pagechangebefore, pagechange, pagechangefailed ‣Many More! Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Virtual Mouse Events ‣vmouseover ‣vmousedown
‣vmousemove ‣vmouseup ‣vmouseclick - WARNING! ‣vmousecancel Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 API Methods Monday, February 13,
12

@mikehostetler BlackBerry DevCon Europe 2012 Changing Pages // Mimic’s a
‘tap’ or ‘click’ $.mobile.changePage( ‘about/us.html’ OR $(‘#about’), { /* options */ } ); // Fetches external URL, inserts it into the DOM $.mobile.loadPage( ‘about/us.html’, { /* options */ } ); Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Loading Message $.mobile.showLoadingMessage() $.mobile.hideLoadingMessage() Monday,
February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 The Data Question ... Monday,
February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Those data- attributes ... Don’t
use: $.data Use: jqmData() and jqmRemoveData() Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 URL’s & Paths Monday, February
13, 12

@mikehostetler BlackBerry DevCon Europe 2012 URL’s & Paths $.mobile.path URL:
http://jblas:[email protected]:8080/mail/inbox? msg=1234&type=unread#msg-content obj = { domain: ‘http://jblas:[email protected]:8080’, host: ‘mycompany.com:8080’, pathname: ’/mail/inbox’, directory: ‘/mail/’ } Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 http://ﬁlamentgroup.com Thanks to the Filament
Group! Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Thanks to the jQuery Mobile
Team! Monday, February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Thanks to the Sponsors! Monday,
February 13, 12

@mikehostetler BlackBerry DevCon Europe 2012 Thank You! @mikehostetler http://mike-hostetler.com http://learn.appendto.com
Links: http://bitly.com/neWK0v Monday, February 13, 12

Rapidly Develop Mobile Web Applications with jQuery Mobile

Rapidly Develop Mobile Web Applications with jQuery Mobile

More Decks by Mike Hostetler

Other Decks in Programming

Featured

Transcript