rapidly develop mobile web applications with jquery mobile

@mikehostetler

Rapidly Develop Mobile Web Applications with

Wednesday, October 19, 11

@mikehostetler

Who am I?

@mikehostetler

http://learn.appendto.com

@mikehostetler

Many More ...

@mikehostetler

The Mobile Frontier ...

@mikehostetler

6.9 Billion People

@mikehostetler

Mobile is available to 90%

@mikehostetler

5.3 Billion+ Active Subscriptions

http://www.itu.int/ITU-D/ict/material/FactsFigures2010.pdf

@mikehostetler

7% of US Traffic 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_Traffic

@mikehostetler

10+ billion by 2013

@mikehostetler

Know Better ... Do Better

@mikehostetler

The is the webPeople expect it to work everywhere

@mikehostetler

The Solution?

@mikehostetler

jQuery Philosophy ...

@mikehostetler

Unified System

Universal Access

Easy Development

@mikehostetler

One Codebase - Multiple Platforms

@mikehostetler

Desktop Too!

@mikehostetler

In <3 with Web Standards

@mikehostetler

Built on jQuery Core ...

@mikehostetler

Familiar API Style

It’s just jQuery!

$( document ).delegate( ".city", "click", function ( e ) { $( "#dialog" ).one( "pagehide", function () { $.mobile.changePage( 'cities.php' ); }).dialog( "close" ); });

@mikehostetler

Small Filesize

@mikehostetler

Mobile Browser Grades

Basic HTMLCBA

Enhanced experience without Ajax

Full experience with Ajax-based animated page transitions.

@mikehostetler

Graded Browser Support

@mikehostetler

Doesn’t Break the Web

@mikehostetler

Unified Experience

@mikehostetler

Accessible

@mikehostetler

Normalizes Input Paradigms

@mikehostetler

Compiles to Native

@mikehostetler

The Con’s ...

@mikehostetler

Perceived Performance

@mikehostetler

Native Look & Feel

@mikehostetler

Device API’s

@mikehostetler

Offline Access

@mikehostetler

These are hard problems ...

@mikehostetler

Choose the right tool ...

@mikehostetler

Current Project Status

@mikehostetler

Just released jQuery Mobile RC1

@mikehostetler

More at http://jqmgallery.com

@mikehostetler

Standard in Adobe CS5.5

@mikehostetler

Shipping in Visual Studio Soon ...

@mikehostetler

Lets dive in ...

@mikehostetler

Download the code

http://jquerymobile.com/download https://github.com/jquery/jquery-mobile

or use a CDN ...

@mikehostetler

Your First Page!<!DocType HTML>

<html> <head> <meta charset=”utf-8”> <title>My first jQuery Mobile Page!</title> </head> <body> .... </body></html>

@mikehostetler

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

</head> ....</html>

@mikehostetler

</head> ....</html>

@mikehostetler

</head> ....</html>

@mikehostetler

Building your Page<body>

<p>Hello World!</p>

</div>

</body>

@mikehostetler

The role of data attributes ...<body>

<p>Hello World!</p>

</div>

</body>

@mikehostetler

Full Sample Page<body> <div data-role=”page”>

</div></body>

@mikehostetler

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>

@mikehostetler

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>

@mikehostetler

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>

@mikehostetler

Add Links <ul data-role="listview" data-inset="true"> <li> <a href=”http://jquery.com”> jQuery </a> </li> ... </ul>

@mikehostetler

More Examples ...

@mikehostetler

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>

@mikehostetler

Nested Lists = Drillable Pages

@mikehostetler

Count Bubbles

<li><a href=”http://jquery.com”> jQuery <span class="ui-li-count">1.6.4</span> </a></li>

...</ul>

@mikehostetler

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>

@mikehostetler

Filter Bar<div data-role=”content”>

<h2>Hello World!</h2> <ul data-role="listview" data-filter="true"> .... </ul>

</div>

@mikehostetler

Adding List Items

@mikehostetler

Append, then Refresh!$(‘ul#jquery’).

.append(

‘<li><a href=”http://sizzlejs.com”>Sizzle JS</a></li>’

).listview( ‘refresh’ );

@mikehostetler

Theming

@mikehostetler

Basic Theming<div data-role=”page” data-theme=”a”>

</div>

@mikehostetler

Side by Side

@mikehostetler

ThemeRoller

@mikehostetler

Links & Navigation

@mikehostetler

External Links <ul data-role="listview" data-inset="true" data-theme=”e”> <li> <a href=”http://jquery.com”> jQuery </a> </li> ... </ul>

@mikehostetler

Internal + Hijax + DOM Injection <ul data-role="listview" data-inset="true" data-theme=”e”> <li> <a href=”jquery.html”> jQuery </a> </li> ... </ul>

Click!

@mikehostetler

Internal + Hijax + DOM Injection

/index.html /jquery.html

@mikehostetler

/jquery.html/index.html

@mikehostetler

/jquery.html/index.html

@mikehostetler

Transitions

@mikehostetler

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>

@mikehostetler

Multi-Page & Pre-Fetch

@mikehostetler

Multiple Pages, One DOM<body>

<div data-role=”page” id=”page1”> <p>Hello World!</p> </div>

</body>

@mikehostetler

Pre-Fetching<body>

<div data-role=”page” id=”page1”> <p>Hello World!</p> <a href="prefetchMe.html" data-prefetch> ... </a> </div>

</body>

@mikehostetler

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>

@mikehostetler

Containers<div data-role="content"> <form action="#" method="get">

<div data-role="fieldcontain"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </div>

</form></div>

@mikehostetler

Optimized for Width Changes

@mikehostetler

Progressive Enhancement

@mikehostetler

Text Input<div data-role="content"> <form action="#" method="get">

<div data-role="fieldcontain"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </div>

</form></div>

@mikehostetler

Text Input Helpers

”password” ”email” ”tel”

@mikehostetler

Text Area’s Grow

@mikehostetler

Flip Switch<form action="#" method="get"> <div data-role="fieldcontain"> <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>

@mikehostetler

Radio Buttons<form action="#" method="get"> <div data-role="fieldcontain"> <input type="radio" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form></div>

@mikehostetler

Checkboxes Too<form action="#" method="get"> <div data-role="fieldcontain"> <input type="checkbox" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form></div>

@mikehostetler

Horizontal Set<form action="#" method="get"> <div data-role="fieldcontain" data-type=”horizontal”> <input type="checkbox" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form></div>

@mikehostetler

Select Lists<form action="#" method="get"> <div data-role="fieldcontain"> <label for="choice-1"> Choose shipping method:</label> <select name="choice-1"> <option value="std">Standard: 7 day </option> ... </select> </div> </form></div>

@mikehostetler

Select Lists<form action="#" method="get"> <div data-role="fieldcontain"> <label for="choice-1"> Choose shipping method:</label> <select name="choice-1"> <option value="std">Standard: 7 day </option> ... </select> </div> </form></div>

@mikehostetler

Select Lists - Non-Native<form action="#" method="get"> <div data-role="fieldcontain"> <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>

@mikehostetler

Extra’s

@mikehostetler

Dialog’s<div data-role="content">

<a href="foo.html" data-rel="dialog">Open dialog</a>

</div>

@mikehostetler

Button’s<div data-role="content">

<a href="#" data-role="button"> Link Button</a>

</div>

@mikehostetler

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>

@mikehostetler

Navbar’s<div data-role="page"> .... <div data-role="footer">

<div data-role="navbar"> <ul> <li>Summary</li> ... </ul> </div> </div></div>

@mikehostetler

Fixed Positioning<div data-role="page">

<div data-role="header" data-position="fixed"> <h1>Fixed toolbars</h1> </div>

</div>

@mikehostetler

Persistent Footer Bar<div data-role="footer">

<div data-role="navbar" class="ui-state-persist"> <p><a href=”#”>Friends</a></p> </div></div>

@mikehostetler

Events

@mikehostetler

New Events

‣ tap, taphold

‣ swipe, swipeleft, swiperight

‣ scrollstart, scrollstop

‣orientationchange

‣ Page Load: pageloadbefore, pageload, pageloadfailed

‣ Page Change: pagechangebefore, pagechange, pagechangefailed

‣Many More!

@mikehostetler

Virtual Mouse Events

‣ vmouseover

‣ vmousedown

‣ vmousemove

‣ vmouseup

‣ vmouseclick - WARNING!

‣ vmousecancel

@mikehostetler

API Methods

@mikehostetler

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 */ });

@mikehostetler

Loading Message$.mobile.showLoadingMessage()

$.mobile.hideLoadingMessage()

@mikehostetler

The Data Question ...

@mikehostetler

Those data- attributes ...Don’t use:

$.data

jqmData() andjqmRemoveData()

@mikehostetler

URL’s & Paths

@mikehostetler

URL’s & Paths$.mobile.path

URL: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content

obj = { domain: ‘http://jblas:password@mycompany.com:8080’, host: ‘mycompany.com:8080’, pathname: ’/mail/inbox’, directory: ‘/mail/’}

@mikehostetler

http://filamentgroup.com

Thanks to the Filament Group!

@mikehostetler

Thanks to the jQuery Mobile Team!

@mikehostetler

Thanks to the Sponsors!

@mikehostetler

Thank You!@mikehostetler

http://mike-hostetler.comhttp://learn.appendto.com

Links: http://bitly.com/neWK0vRate: http://j.mp/nQgs8V

rapidly develop mobile web applications with jquery mobile

Technology

jquery, jquery ui, and jquery mobile: recipes and...

jquery mobile workshop

jquery, jquery ui et jquery...

touching jquery mobile

jquery mobile phonegap

creating mobile applications with jquery mobile … ·...

jquery & jquery mobile

jquery mobile ux

mobile apps with jquery mobile - sigs.de€¦ · mobile...

jquery mobile

master mobile web apps with jquery mobile - elated of... ·...

jquery mobile webinar

jquery mobile jump start

jquery mobile: optimizing perfromance

webmatrix jquery mobile web

10. jquery mobile - what is jquery mobile? how to use it?

mat marquis - jquery mobile

04 jquery mobile

jquery mobile - laabhaa.com · jquery mobile about the...

jquery mobile with html5