Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Todd Parker & Scott Jehl : jQuery Mobile Keynot...
Search
scottjehl
October 01, 2011
Design
14
3.6k
Todd Parker & Scott Jehl : jQuery Mobile Keynote 2011
The jQuery Mobile Keynote delivered at jQuery Conference Fall 2011 in Boston, MA.
scottjehl
October 01, 2011
Tweet
Share
More Decks by scottjehl
See All by scottjehl
Responsive & Responsible
scottjehl
48
5.3k
Other Decks in Design
See All in Design
最速[要出典]アクセシビリティチェック
magi1125
2
210
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
230
LayerX DesignersDeck
layerx
PRO
0
2.7k
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
130
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
770
横断組織デザイナーの働き方
mixi_design
PRO
0
340
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.8k
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
190
NAHO SHIMONO_Portfolio2025
nahohphp
0
190
セブンデックス カルチャーブック
sevendex
0
3.1k
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
170
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
290
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
How GitHub (no longer) Works
holman
314
140k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Producing Creativity
orderedlist
PRO
344
40k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Navigating Team Friction
lara
183
15k
Faster Mobile Websites
deanohume
306
31k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Transcript
Todd Parker & Scott Jehl filament group State of the
Framework
filament group We design engaging sites and applications that are
simple to use and accessible to everyone.
A quick restatement of goals & philosophy How’d we get
here?
The mobile web is massive
http://itu.int/ITU-D/ict/material/FactsFigures2010.pdf People Billion 6.8 Subscriptions 5.3
35 Billion Devices on the internet Eric Schmidt DLD Conference
2011 Keynote via http://tcrn.ch/hD4Owx
They aren’t all iPhones...
July 2011 World Mobile Browsers 4.01 12.3 17.1 18.17 19.95
22.07 Opera iPhone / iPod Touch Android Nokia BlackBerry Netfront http://gs.statcounter.com/#mobile_browser-ww-monthly-201103-201103-bar
Tim Berners-Lee July 1996 “Anyone who slaps a ‘this page
is best viewed with Browser X’ label on a web page appears to be yearning for the bad old days [...]”
None
The goal
...and work especially well in capable browsers! Make it work
everywhere.
All Platforms 1 codebase
iOS Android WebOS Blackberry WP7 Meego/Maemo Kindle 2 Nook Playbook
Symbian Symbian
Desktop too.
Also here.
Built on standards
and jQuery core Mobile + Tablet UI Tools + utilities
Familiar API, CDN delivery jquery.min.js jquery.mobile.min.js 31kb 10 - 25kb
Progressive Enhancement
Don’t break the web. Bookmark / Refresh Friendly URLS History
Works Now with PushState! jquerymobile.com/test/docs/api/globalconfig.html
Not the OS Design for the brand
None
Keep it accessible
Touch, mouse, keyboard Touch & Mouse Events Mouse Events
Load only what you need! Modular, Decoupled
mobile to tablet to desktop One framework that adapts to
context
None
One. Web.
without being exclusive. Build rich experiences
How to build a jQuery Mobile App
Step 1. Make a regular website
<!DOCTYPE html> <html> <head> <title>My Web App</title> <style>body {text-align: center;
}</style> </head> <body> <h1>Welcome to my site!</h1> <p><a href=”contact.html”>Contact</a></p> </body> </html>
None
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>
Set the zoom <meta name="viewport" content="width=device- width,initial-scale=1">
None
...or something. Step 3 Go shopping
How the heck?
Introducing... The Navigation model
Listen, intercept, handle w/ Ajax products.html <div data-role=”page”> TAP
After that, update the URL History, deep linking, bookmarking http://example.com/products.html
...or in older browsers Hash works as a fallback http://example.com/#/products.html
Linking Pages
How to link pages <DIV class=”click-me” url=”page.html”> This is a
jQuery Mobile link! </DIV>
WAT?
Look familiar? <a href=”page.html”> This is a jQuery Mobile link!
</a>
Transitions
Configuring Transitions <a href=”1.html” data-transition=”fade”> This is a jQuery Mobile
link! </a>
Regular forms; Hijax’d <form action="handler.php" method="post"> Don’t thank us; thank
this guy >
Transitions too! <form action="handler.php" method="post" data-transition=”slideup”>
“Pages” in the page
Page container <body> <div data-role="page"> <!-- page content goes here
--> </div> </body>
Page containers are.... • used to group “pages” in DOM
• auto-generated for you • any kind of element you’d like
Dialogs
are pages <a href=”dialogs-1.result.html” data-rel=”dialog”> Open page as a dialog!
</a>
...but not in history ...but they can be closed with
back button
Multipage documents
<body> <div data-role="page" id="home"></div> <div data-role="page" id="products"></div> <div data-role="page" id="services"></div>
<div data-role="page" id="about"></div> <div data-role="page" id="contact"></div> </body> ID’d sections
<p>Hello world</p> <ul data-role="listview"> <li><a href="#products">Products</a></li> <li><a href="#services">Services</a></li> <li><a href="#about">About
us</a></li> <li><a href="#contact">Contact</a></li> </ul> ...and local anchor links
Page Sections
Page child roles header footer content
<body> <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>
</body> Page child roles
pros / cons •May lend a “native” app feel. •Useful
in certain simple UI situations: full-page photo galleries, etc. •Often translate poorly to desktop. •Only feel “native” to iOS users •Uncanny Valley
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> Basic unordered
list
Basic unordered list
<div data-role="content"> <p>Hello world</p> <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> </div><!-- /content --> List with links
List with links
Etc.
Buttons
Headers, footers
“Fixed” toolbars
Form elements
Collapsibles
The jQM API
$.mobile
Navigation Scripting
$.mobile.changePage
Change pages via JS $.mobile.changePage(“about/us.html”);
...and back window.history.back();
Submit form data $.mobile.changePage(“handler.php”, { type: "post", data: { "shipping":
"Fast!" } });
$.mobile.loadPage
$.mobile.loadPage( "about/us.html" ); Load pages via JS
<a href=”page.html” data-prefetch>Page</a> loadPage() from HTML
Custom Events
Page Events
the new domready Introducing pagecreate
Small code tidbit. $( “.ui-page” ).live( “pagecreate”, function(){ alert( “I’m
created!” ); });
pre-parse the markup here Also: pagebeforecreate
pagebeforecreate $( “div” ).live( “pagebeforecreate”, function(){ alert( “I’m about to
be created!” ); });
Page Change Events
All Page Change Events • pagebeforechange • pagebeforeshow • pagebeforehide
• pageshow • pagehide • pageremove • pagechange
Putting it all together
FlipPics
None
http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/ About those pagination links...
Milestones
Alphas 1-3:
Alpha 4
None
vmousedown | vmouseover | vmouseup | vmousemove | vmouseclick Virtualized
Events
Use ‘em like mouse events $( “a.toggleable” ).bind( “vclick”, function(){
$(this) .next() .toggleClass( “hidden” ); });
$.noConflict() for your HTML Data Attr Namespacing
$.mobile.allowCrossDomainPages
Also. • Configurable text strings (i18n) • Updating page titles
• No more meta viewport injection
Beta 1
None
Also. • URL bar hidden: iOS + Android • Smoother
transitions • Improved URL Handling • Pinch zooming enabled • Auto Back buttons OFF
Beta 2
None
Widget Decoupling • header/content/footer • collapsible • controlgroup • fieldcontain
• fixheaderfooter • button • checkboxradio • select • slider • textinput • links theming • listview • navbar • grid
Cleaner design
Page wrapper: optional
Gradients: More!
New create event $( ...new markup that contains widgets... )
.appendTo( ".ui-page" ) .trigger( "create" );
Also. • DOM management • Data-prefetch • autoInitializePage • Configuration
improvements
Beta 3
history.pushState
pagebeforechange
iOS5 Overflow & Fixies
1.0 RC1
Well, ok.
data-content-theme
Search icon
API docs
What’s Next?
1.0 in weeks
Theming is hard.
Basic TR demo movie
None
Download Builder in the works! Also!
Build, Contribute
Demos & Docs jquerymobile.com/demos/1.0rc1/ Live dev snapshot jquerymobile.com/test/ Nightlies, Latest
jquerymobile.com/latest/
fork & contribute github.com/jquery/jquery-mobile
Build your own $ git clone git://github.com/jquery/ jquery-mobile.git $ cd
jquery-mobile $ make 1 2 3
Thanks core team! • Kin Blas ( Adobe ) •
John Bender ( Adobe ) • Ghislain Seguin ( Jive )
Awesome sponsors are awesome filament group
Thanks! Questions? @toddmparker @scottjehl