Rapidly Develop Mobile Web Applications with jQuery Mobile

Rapidly Develop Mobile Web
Applications with

@mikehostetler

Wednesday, October 19, 11

Who am I?

@mikehostetler


@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 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

@mikehostetler


10+ billion
by 2013

@mikehostetler


Know Better ... Do Better

?

@mikehostetler


The is the web
People expect it to work everywhere

@mikehostetler


The Solution?

@mikehostetler


jQuery Philosophy ...

@mikehostetler


Uniﬁed 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

C Basic HTML

B Enhanced experience without Ajax

Full experience with Ajax-based
A animated page transitions.

@mikehostetler


Graded
Browser
Support

@mikehostetler


Doesn’t Break the Web

@mikehostetler


Uniﬁed Experience

@mikehostetler


Accessible

@mikehostetler


Normalizes Input Paradigms

@mikehostetler


Compiles to Native

+
=

@mikehostetler


The Con’s ...

@mikehostetler


Perceived Performance

@mikehostetler


Native Look & Feel

vs.

@mikehostetler


Device API’s

@mikehostetler


Ofﬂine 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


Pages

@mikehostetler


Your First Page!
<!DocType HTML>

<html>
<head>
<meta charset=”utf-8”>
<title>My ﬁrst 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" />

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

@mikehostetler


Building your Page
<body>

<div data-role=”page”>

<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=”header”> ... </div>

<div data-role=”content”> ... </div>

<div data-role=”footer”> ... </div>

</div>
</body>

@mikehostetler


Lists

@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

<ul data-role="listview">
<li>jQuery</li>
<li>jQuery UI</li>
<li>QUnit</li>
</ul>

</div>

@mikehostetler


Inset Style

<ul data-role="listview"
data-inset="true" >
<li>jQuery</li>
<li>jQuery UI</li>
<li>QUnit</li>
</ul>

</div>

@mikehostetler


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

@mikehostetler


More Examples ...

@mikehostetler


Ordered Lists

<ol data-role="listview">
<li>jQuery</li>
<li>jQuery UI</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

<li data-role="list-divider">Core</li>
<li>jQuery</li>

<li data-role="list-divider">UI</li>
<li>jQuery UI</li>

<li data-role="list-divider">Testing</li>
<li>QUnit</li>
</ul>

@mikehostetler


Filter Bar

data-ﬁlter="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>

</div>

@mikehostetler


Side by Side

@mikehostetler


ThemeRoller

@mikehostetler


Links & Navigation

@mikehostetler


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

@mikehostetler


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

@mikehostetler


Internal + Hijax + DOM Injection

/index.html /jquery.html

@mikehostetler


Transitions

@mikehostetler


External Links
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>

<p>Hello World!</p>
</div>

</body>

@mikehostetler


Pre-Fetching
<body>

<p>Hello World!</p>
<a href="prefetchMe.html" data-prefetch> ... </a>
</div>

<p>Hello World!</p>
</div>

</body>

@mikehostetler


Forms

@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="ﬁeldcontain">
value="" />
</div>

</form>
</div>

@mikehostetler


Optimized for Width Changes

@mikehostetler


Progressive Enhancement

@mikehostetler


Text Input

value="" />
</div>

</form>
</div>

@mikehostetler


Text Input Helpers

”password” ”email” ”tel”

@mikehostetler


Text Area’s Grow

@mikehostetler


Flip Switch
<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
<input type="radio" name="choice-1"
value="choice-1">
<label for="choice-1">Apples</label>
</div>
...
</form>
</div>

@mikehostetler


Checkboxes Too
<input type="checkbox"
name="choice-1" value="choice-1">
</div>
...
</form>
</div>

@mikehostetler


Horizontal Set
<div data-role="ﬁeldcontain"
data-type=”horizontal”>
<input type="checkbox"
name="choice-1" value="choice-1">
</div>
...
</form>
</div>

@mikehostetler


Select Lists
<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
<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

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

</div>

@mikehostetler


Button’s

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

<a href="#" data-role="button"
data-icon="star">Star Icon!</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="footer">

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

@mikehostetler


Fixed Positioning

<div data-role="header"
data-position="ﬁxed">
<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

Use:

jqmData()
and
jqmRemoveData()

@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


Thanks to the Filament Group!
http://ﬁlamentgroup.com

@mikehostetler


Thanks to the
jQuery Mobile Team!

@mikehostetler


Thanks to the Sponsors!

@mikehostetler


Thank You!
@mikehostetler
http://mike-hostetler.com
http://learn.appendto.com

Links: http://bitly.com/neWK0v
Rate: http://j.mp/nQgs8V

@mikehostetler


Rapidly Develop Mobile Web Applications with jQuery Mobile

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Empfohlen

Empfohlen (20)

Rapidly Develop Mobile Web Applications with jQuery Mobile