Languages
Pages
Legal
HarvardWWW
jQuery Mobile
filament group
Hello. Mat MarquisFilament Group Inc.
Engaging experiences, accessible to everyone.
filament group
Authors
Open source contributors
Sponsor & design lead
jQuery MobileIn a nutshell
Mobile UI framework
UI Elements
AJAX Nav
Project GoalsNo browser left behind.
10+ BillionWeb enabled mobile devices on the internet
Source: ITU, Mark Lipacis, Morgan Stanley Research.
(They aren’t all iPhones)
4.01
12.3
17.1
18.17
19.95
22.07
OperaiPhone / iPod TouchAndroidNokiaBlackBerryNetfront
July 2011 World Mobile Browsershttp://gs.statcounter.com/#mobile_browser-ww-monthly-201103-201103-bar
All Platforms1 codebase
and for everyone
Make it workeverywhere
iOS Android WebOSBlackberry WP 7/7.5
Meego/MaemoKindle/Nook
Playbook
Symbian
Symbian
Desktop too
50+ devices in our lab
Built on standards
Progressive Enhancement
Don’t break the web.
Bookmark / Refresh Friendly URLS
History Works
Don’t break the web.
PushState jquerymobile.com/test/docs/api/globalconfig.html
Keep it accessible
Touch, mouse, keyboard
Touch & Mouse Events
Mouse Events
Web to Native
To App Stores
Themable, Brandablehttp://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>
Step 2.
Add jQuery Mobile
<!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>
<!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>
Markup config
Links, Ajaxified
<a href="page.html">Link</a>
Listen, intercept, handle w/ Ajax
products.html<div data-role=”page”>
TAP
Listen, intercept, handle w/ Ajax
products.html<div data-role=”page”>
TAP
Transitions
<a href="page.html" data-transition="flip">Link</a>
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>
Listviews
<ul> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul>
A Regular UL
Basic unordered list
<ul data-role="listview"> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul>
Add role
Read-only listview
<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>
Add links
Linked listview
<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>
Filter + inset
List with links
Etc.
Forms
Native
Auto enhanced
<label for="search">Search Input:</label>
<input type="search" name="password" id="search" value="" data-role="none" />
Opt out
<label for="search" class="ui-hidden-accessible">Search Input:</label>
<input type="search" name="password" id="search" value="" data-role="none" />
Hide accessibly
Page regions
Anatomy of a page
header
footer
content
<body>
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div><!-- /page -->
</body>
Page sections
Metric ton of
Resources
Adobe CS 5.5
Tools
Tools
Tools
Tools
Books
Putting it all together
FlipPics
Creating Themes
Basic TR demo movie
Awesome sponsors
filament group
filamentgroup.com
@jquerymobile
@filamentgroup
jquerymobile.com
github.com/jquery/jquery-mobile
github.com/filamentgroup
Thanks!
Top Related