This document provides an overview of jQuery Mobile, a JavaScript framework for building mobile web sites and apps. It discusses how jQuery Mobile uses progressive enhancement with HTML5 to provide cross-platform support and a native look-and-feel on mobile devices. Key aspects covered include jQuery Mobile's use of progressive enhancement to enhance content, presentation, and behavior; its reliance on HTML5 data attributes for markup; support for various widgets like pages, buttons, forms and lists; and options for native deployment using technologies like PhoneGap.
2. jQuery Mobile
jQuery Mobile
and Progressive Enhancement
with
or really
+JS
but never
jQuery Mobile: Progressive Enhancement with HTML5
3. Who?
Todd Anderson
Progressively Enhanced from NJ.
Currently resides in Boston.
Shows displeasure for right-aligned fields.
Took a picture of himself in a kitchen at least once.
kitchenphoto_3421.jpeg
Senior Software Engineer
http://infrared5.com
todd@custardbelly.com
@bustardcelly
http://twitter.com
100% Centaur
Author
jQuery Mobile: Progressive Enhancement with HTML5
4. What?
http://jquerymobile.com
• 1.0 Alpha 4.1
• Built on jQuery + jQuery UI* (Widget)
• Cross Platform
• A-grade browser support
jQuery Mobile: Progressive Enhancement with HTML5
5. jQM Graded Browser Support
http://jquerymobile.com/gbs/
jQuery Mobile: Progressive Enhancement with HTML5
16. blah blah mist blah blah hungry blah
dialog
Messages
i think my presentation is going well!
do you, now?
*sigh* whatʼs happened between us?
you keep complaining about “mist”. itʼs annoying.
jQuery Mobile: Progressive Enhancement with HTML5
31. lost password?
forms!
jQuery Mobile: Progressive Enhancement with HTML5
32. form markup and makeup
forms
• declaration
<form id=”myform” action=”login.php” method=”post”>
...
</form>
• content
<label for="name">Username:</label>
<input type="text" name="name" id="name" value="" />
• event
$(“myform”).bind( “submit”, function( event ) {
...
});
jQuery Mobile: Progressive Enhancement with HTML5
33. demo
form demo: jQM docs
http://jquerymobile.com/demos/1.0a4/#docs/forms/forms-all.html
jQuery Mobile: Progressive Enhancement with HTML5
34. form elements
form element widgets
http://jquerymobile.com/demos/1.0a4/docs/forms/docs-forms.html
textinput
$(“input[type=’text’]”).textinput(“disable”);
checkboxradio
$(“#myform”).find(“input”)
.filter(“[type=’checkbox’], [type=’radio’]”)
.attr(“checked”, false)
.checkboxradio(“refresh”);
slider
$("input[type=range]").val(100).slider("refresh");
selectmenu
var myselect = $("select#myselect");
var myselect = $("select#myselect"); myselect[0].selectedIndex = 0;
myselect[0].selectedIndex = 0; myselect.selectmenu("refresh");
myselect.selectmenu("refresh");
jQuery Mobile: Progressive Enhancement with HTML5
35. native data attributes
native*
• provides no enhancement
• data-role=”none”
• data-native-menu=”true”
* Must be declared on element prior to load of jQuery
Mobile. Cannot be assigned and refreshed at runtime.
jQuery Mobile: Progressive Enhancement with HTML5
37. jQM item renderers
list item renderers
no extra data-roles!
inspects the children declaration within a list item (<li>)
icon list item renderers, split button lists
easy to create own custom list item renderers
look sorta like this by default
jQuery Mobile: Progressive Enhancement with HTML5
38. jQuery Mobile lists
lists demo
jQuery Mobile: Progressive Enhancement with HTML5
39. themes
themes
• jQM provides 5 color swatch schemes
• -a through -e; allows up to 26
• DO NOT DOUBLE-UP WRAP-AROUND!
• eg. ui-bar-aa
jQuery Mobile: Progressive Enhancement with HTML5
40. themes
beyond color swatches
• valencia
http://jquerymobile.com/test/themes/valencia/
• ThemeRoller
http://jqueryui.com/themeroller/
jQuery Mobile: Progressive Enhancement with HTML5
41. accessibility
WAI-ARIA
http://www.w3.org/WAI/intro/aria.php
• Roles, States and Properties
• Keyboard navigation with tabIndex
• Live Regions for dynamic content
Introduction to WAI ARIA
Gez Lemon, August 1 2008
http://dev.opera.com/articles/view/introduction-to-wai-aria/
jQuery Mobile: Progressive Enhancement with HTML5
42. accessibility
screen reader demo*
*shamelessly re-presented as seen in a Scott Jehl presentation
http://dayofjs.com/videos/22152945/jquery-mobile_scott-jehl
jQuery Mobile: Progressive Enhancement with HTML5
49. jQM home applications
web-app considerations
higgins!
• use AJAX on change page
• else will launch the browser
• include Back buttons in header
• use window.navigator.standalone
• cache.manifest
http://diveintohtml5.org/offline.html
jQuery Mobile: Progressive Enhancement with HTML5
51. native deployment - PhoneGap
PhoneGap
http://www.phonegap.com/
• project templates
• JS API for native access (limited)
• PhoneGap Build (Beta invite)
jQuery Mobile: Progressive Enhancement with HTML5
52. native deployment - Adobe AIR
Adobe AIR
http://labs.adobe.com/technologies/flashplatformruntimes/
• SDK compiler tools
• StageWebView
• JS <--> AS = iffy on device
Making the most of StageWebView
Sean Voisen, October 29 2010
http://voisen.org/blog/2010/10/making-the-most-of-stagewebview/
jQuery Mobile: Progressive Enhancement with HTML5
54. i do like the shirt, though.
questions?*
* except from you in the blue shirt. 3rd row. you know who you are.
jQuery Mobile: Progressive Enhancement with HTML5
55. jquery mobile
thank you!
todd anderson / todd@custardbelly.com
@bustardcelly
http://github.com/bustardcelly
http://www.custardbelly.com/blog
jQuery Mobile: Progressive Enhancement with HTML5