Mat Marquis - JQuery Mobile

ﬁlament group

jQuery Mobile
HarvardWWW

Hello.
Mat Marquis
Filament Group Inc.

ﬁlament group

Engaging experiences,
accessible to everyone.

jQuery Mobile
In a nutshell

Project Goals
No browser left behind.

10+ Billion
Web enabled
mobile devices on
the internet

Source: ITU, Mark Lipacis, Morgan Stanley Research.

(They aren’t all iPhones)
22.07

19.95

18.17 July 2011 World Mobile Browsers
http://gs.statcounter.com/#mobile_browser-ww-monthly-201103-201103-bar
17.1

Opera
iPhone / iPod Touch
12.3 Android
Nokia
BlackBerry
Netfront

4.01

Make it work
everywhere
and for everyone

iOS Android Blackberry WebOS WP 7/7.5 Symbian

Symbian

Meego/Maemo Playbook
Kindle/Nook

Don’t break the web.

History Works Bookmark / Refresh
Friendly URLS

Don’t break the web.

PushState
jquerymobile.com/test/docs/api/globalconfig.html

Touch, mouse, keyboard

Touch & Mouse Events

Mouse Events

Themable, Brandable
http://jquerymobile.com/themeroller/

...or native if you want

http://taitems.github.com/iOS-
Inspired-jQuery-Mobile-Theme/

Getting started with

jQuery Mobile

Step 1.

Make a regular website

<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Welcome!</h1>
<p><a href="contact.html">Send me a note!</a></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>

<title>My Web App</title>
<style>body { text-align: center; }</style>

<meta name="viewport" content="width=device-width,initial-
scale=1">

<link rel="stylesheet" href="jquery.mobile.min.css">
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>

</head>
<body>
<h1>Welcome to my Site!</h1>
<p><a href="contact.html" data-role="button">Contact</a></p>
</body>
</html>

Links, Ajaxified

<a href="page.html">Link</a>

Listen, intercept, handle w/ Ajax

TAP products.html
<div data-role=”page”>

Transitions

<a href="page.html"
data-transition="flip">Link</a>

Dialog

<a href="page.html"
data-rel="dialog">Link</a>

Button

<a href="page.html"
data-role="button">Button</a>

Icon

<a href="page.html"
data-role="button" data-icon="star">
Button</a>

Theme swatch

<a href="page.html"
data-role="button" data-theme="b">
Button</a>

A Regular UL
<ul>
<li>Products</li>
<li>Services</li>
<li>About us</li>
<li>Contact</li>
</ul>

Add role
<ul data-role="listview">
<li>Products</li>
<li>Services</li>
<li>About us</li>
<li>Contact</li>
</ul>

Add links

<ul data-role="listview">
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

Filter + inset

<ul data-role="listview" data-filter="true"
data-inset="true">
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

Opt out

<label for="search">Search Input:</label>

<input type="search" name="password"
id="search" value="" data-role="none" />

Hide accessibly

<label for="search"
class="ui-hidden-accessible">Search Input:</
label>

<input type="search" name="password"
id="search" value="" data-role="none" />

Anatomy of a page

header

content

footer

Page sections
<body>

<div data-role="page">

<div data-role="header">...</div>

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

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

</div>

</body>

Tools

http://codiqa.com/jqueryuk

Awesome sponsors

ﬁlament group

filamentgroup.com
@filamentgroup

github.com/filamentgroup

jquerymobile.com
@jquerymobile

github.com/jquery/jquery-mobile

Mat Marquis - JQuery Mobile

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie Mat Marquis - JQuery Mobile

Ähnlich wie Mat Marquis - JQuery Mobile (20)

Mehr von Harvard Web Working Group

Mehr von Harvard Web Working Group (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Mat Marquis - JQuery Mobile