jQuery Mobile: Progressive Enhancement with HTML5

jQuery Mobile:
Progressive Enhancement with
HTML5

jQuery Mobile

jQuery Mobile
and Progressive Enhancement
with

or really
+JS
but never

jQuery Mobile: Progressive Enhancement with HTML5

Who?

Todd Anderson
Progressively Enhanced from NJ.
Currently resides in Boston.
Shows displeasure for right-aligned ﬁelds.
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


What?

http://jquerymobile.com

• 1.0 Alpha 4.1
• Built on jQuery + jQuery UI* (Widget)
• Cross Platform
• A-grade browser support


jQM Graded Browser Support

http://jquerymobile.com/gbs/


How?

http://jquerymobile.com

• Progressive Enhancement
• HTML5 dataset attribute (data-)
• CSS3 & Themes
• Unobtrusive JavaScript


Progressive Enhancement:
Content

http://www.ﬂickr.com/photos/bamawester/97776370/


Content + Presentation



Content + Presentation + Behavior


http://selleckwaterfallsandwich.tumblr.com/


How?!

data-role


jQuery Mobile Pages

data-role=”page”
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet"
href="style/jquery.mobile-1.0a4.1.min.css"
/>
</head>
<body>
<div data-role=”page”>
<p>This is so selleck.</p>
</div>
</body>
<script src="script/jquery-1.6.1.min.js"></script>
<script src="script/jquery.mobile-1.0a4.1.js"></script>
</html>


jQuery Mobile Pages

Page Anatomy required

<!DOCTYPE html> optional
<html>
<head>
<title>I am sure to mistype something when I show code.</title>
<link rel="stylesheet" href=”style/jquery.mobile-1.0a4.1.min.css"/>
</head>
<body>
<div data-role=”page”>
<div data-role=”header”><h3>jQuery Mobile Pages</h3></div>
<div data-role=”content”>
<p class=”content-header”>Page Anatomy</p>
</div>
<div data-role=”footer”>
<p class=”footer-right”>jQuery Mobile: ProgEnhan with HTML5</p>
<img src=”fatc-logo.png” alt=”FATC” />
</div>
</div>
</body>
<script src="script/jquery.mobile-1.0a4.1.js"></script>
</html>


jQuery Mobile pages

page demo


jQuery Mobile Pages

Internal vs. External
Internal

href : #anotherpage

multiple internal pages

External

href : anotherpage.html

[data-ajax=”true”] : 1 internal page

[data-ajax=”false”] : multiple internal pages

[rel=”external”] : multiple internal pages


jQuery Mobile pages

pages demo


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 pages

dialog demo


$.mobile methods & properties

API
• $.mobile.path
conﬁguration • $.mobile.base
• $.mobile.silentScroll()
• $.mobile.addResolutionBreakpoints()
• $.mobile.activePage
• $.mobile.pageLoading()
• $.mobile.changePage()


$.mobile conﬁguration

API
• ns
conﬁguration • defaultTransition
• gradeA()
• ajaxEnabled
• more...
<script type="text/javascript">
(function( $, document ) {
$(document).bind( "mobileinit", function() {
$(document).unbind( "mobileinit");
$.extend( $.mobile, {
ns: “custom-"
});
})
})( jQuery, document );
</script>
<script src="script/jquery.mobile-1.0a4.1.min.js"></script>

* custom namespace requires change to .ui-mobile in css


.jqmData()

data access
jQuery

$(elem).data( key );

$(elem).data( key, value );

jQuery Mobile

$(elem).jqmData( key );

$(elem).jqmData( key, value );

$(page).ﬁnd(“div:jqmData(role=ʼcontentʼ)”);


itʼs our time, down here.

real world

$(50).ﬁnd(“:jqmData(hideout=ʻfratelliʼ)”);


this is so sandwich right now

UI Widgets

button

controlgroup

navbar

toolbars

form elements

list


buttons and such

data-role=”button”
<a href=”#stop” data-role=”button”>no whammy!</a>

<button>
<button type=”submit” name=”submit” value=”submit-stop”>no whammy!</button>

data-icon

rate
data-icon=”star”

data-iconpos

swim waddle
data-iconpos=”left” data-iconpos=”right” data-iconpos=”notext”


jQM button group layout: inline

organization
• data-inline
true
eep quack ow

false [default]

eep

quack

ow


jQM button group layout: controlgroup

organization
• data-inline
• data-role=”controlgroup”
• data-type
vertical [default] horizontal

home home favorites settings
favorites
settings


jQM button group layout: ui-grid

organization
• data-inline
• data-type
• data-role
• ui-grid-[a to d]
• ui-block-[a to d]
home favorites settings


jQuery Mobile buttons!

button demo


jQM button group layout: navbar

organization
• data-inline
• data-type
• data-role
• ui-grid-[a to d]
• ui-block-[a to d]
• data-role=”navbar”

jQM button navbah

data-role=”navbar”
• data-grid <div data-role="navbar" data-grid="b">
<ul>
<li><a href="#">home</a></li>

• column count <li><a href="#">settings</a></li>
<li><a href="#">favorite</a></li>

• a(2) - d(5) </ul>
</div>

car mayor soda

$(“div:jqmData(role=ʼnavbarʼ)”).bostonize();

cah mayah tonic


jQuery Mobile buttons!

navbar demo


lost password?

forms!


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 ) {
...
});


demo

form demo: jQM docs
http://jquerymobile.com/demos/1.0a4/#docs/forms/forms-all.html


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");


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.


lists

data-role=”listview”


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 lists

lists demo


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


themes

beyond color swatches
• valencia
http://jquerymobile.com/test/themes/valencia/

• ThemeRoller
http://jqueryui.com/themeroller/


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/


accessibility

screen reader demo*

*shamelessly re-presented as seen in a Scott Jehl presentation
http://dayofjs.com/videos/22152945/jquery-mobile_scott-jehl


cʼmon already!

enhancement load

ﬁle min-gzip
jquery.min.js 31KB
jquery.mobile.min.js 19KB
jquery.mobile.min.css 7KB
57KB


perception techniques

<head>
...
css
<link rel="stylesheet" href="style/jquery.mobile-1.0a4.1.min.css" />
<style type="text/css">
body {
display: none;
visibility: hidden;
}
</style>
</head>
<body>
...
</body>
<script src="script/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript">
function showPage() {
$("body").css( "visibility", "visible").css( "display", "inherit" );
}
$().ready( showPage );
</script>

eh...
...


perception techniques

LabJS
http://labjs.com/

<html>
<head>
<title>labjs</title>
<link rel="stylesheet" href="style/jquery.mobile-1.0a4.1.min.css" />
</head>
<body>
<p>loading...</p>
</body>
<script src="script/LAB.min.js"></script>
<script>
$LAB
.script("script/jquery-1.6.1.min.js")
.script("script/jquery.mobile-1.0a4.1.min.js").wait( function() {
$("body").load("jqm_page.html");
});
</script>
</html>

better!

outta the browser... sorta

web-app


home

home screen
• metadata
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-
scale=1.0; minimum-scale=1.0; user-scalable=false;"/>

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/
SafariHTMLRef/Articles/MetaTags.html

• webclips & appearance
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-startup-image" href="start-up-image.png" />

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/
safariwebcontent/conﬁguringwebapplications/conﬁguringwebapplications.html


we bapp

web-app demo


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/ofﬂine.html


native deployment

native (easily)
existing jQM application -> native install


native deployment - PhoneGap

PhoneGap
http://www.phonegap.com/

• project templates
• JS API for native access (limited)
• PhoneGap Build (Beta invite)


native deployment - Adobe AIR

Adobe AIR
http://labs.adobe.com/technologies/ﬂashplatformruntimes/

• 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/


native deployment - others

native: others
existing jQM application -> native install

NimbleKit
http://www.nimblekit.com/
QuickConnectFamily
http://quickconnectfamily.org/
Titanium*
http://www.appcelerator.com/
Rhodes**
http://rhomobile.com/products/rhodes/

* in theory, using ** havenʼt tested
Titanium.UIWEbView


i do like the shirt, though.

questions?*

* except from you in the blue shirt. 3rd row. you know who you are.


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

More Related Content

What's hot

Viewers also liked

Similar to jQuery Mobile: Progressive Enhancement with HTML5

Recently uploaded

jQuery Mobile: Progressive Enhancement with HTML5