jQuery Mobile - Web Deliver for All

Web Delivery for ALL!Saturday, October 6, 12

Who? Marc Grabanski @1marc jQuery UI Datepicker MarcGrabanski.com LOTS of UI DevSaturday, October 6, 12

Who? Current Talent Evangelist & UI/UX Developer MJG International www.mjg.inSaturday, October 6, 12

The Great Promise of the Web The web is for everyone and all can view itSaturday, October 6, 12

Saturday, October 6, 12

Not “Mobile Only” Mobile FirstSaturday, October 6, 12

Desktop too!Saturday, October 6, 12

Source Your SourcesSaturday, October 6, 12

I visited and talked to aboutSaturday, October 6, 12

Why jQuery Mobile?Saturday, October 6, 12

4 Main Reasons to Use jQuery MobileSaturday, October 6, 12

#1. Ajaxified Navigation Faster subsequent page loads Friendly Ajax URLsSaturday, October 6, 12

#2. Layout and Theming Engine Quickly style and extend stylesSaturday, October 6, 12

#3 Touch Friendly Inputs (and widgets) Improved UX for form inputsSaturday, October 6, 12

#4 Widest Browser Coverage Web living up to it’s promiseSaturday, October 6, 12

Devices Tested jQuery Mobile Testing LabSaturday, October 6, 12

Fully Supported • iOs 3.2+, Android 2.1+/Honeycomb • Windows Phone 7 • Blackberry 6.0/Playbook • Palm WebOS 1.4+ • Mobile Opera & Mobile Firefox • Amazon Kindle 3 & Fire • Desktop Chrome, FF, IE 7+, OperaSaturday, October 6, 12

Progressive Enhancement C-Grade: Basic HTML + B-Grade: Enhanced Style, No Ajax ++ A-Grade: Full Enhanced Style, Ajax and CSS TransitionsSaturday, October 6, 12

You’ll always see...somethingSaturday, October 6, 12

it’s alive!Saturday, October 6, 12

Gallery http://jqmgallery.comSaturday, October 6, 12

and growing... http://www.google.com/trends/?q=jquery+mobileSaturday, October 6, 12

Two popular mobile frameworks “Web First” “App First” http://www.google.com/trends/?q=jquery+mobile,+sencha,+dojo +mobile,+jqmobiSaturday, October 6, 12

jQuery Mobile + Adobe Embedded into Creative Suite Sponsors jQuery Mobile DevSaturday, October 6, 12

Dev Snapshot http://jquerymobile.com/testSaturday, October 6, 12

One More *Magical* FileSaturday, October 6, 12

Get the (Coding)Party Including Latest: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.js"></script> http://jquerymobile.com/download/Saturday, October 6, 12

#1 - Ajaxified NavigationSaturday, October 6, 12

No page refresh?! How does that work?Saturday, October 6, 12

Looks for href and action in your HTMLSaturday, October 6, 12

Auto-Ajax Links 1. Ajax gets href=”page.html” (unless data-ajax=false) 2. Slides in New Content 3. Updates URL (with <body>...</body> or data-role=page)Saturday, October 6, 12

/index.html *click*Saturday, October 6, 12

/index.html /page.html *load*Saturday, October 6, 12

/index.html /page.html *slide*Saturday, October 6, 12

ndex.html /page.html *done*Saturday, October 6, 12

Page Transitions • <a data-transition=pop>...</a> (slide, slideup, slidedown, pop, fade, flip) • <a data-transition=pop data-direction=reverse>...</a> http://jquerymobile.com/demos/1.2.0/docs/pages/page- transitions.htmlSaturday, October 6, 12

Default transition is now fade (more webby)Saturday, October 6, 12

Pages w/out Ajax <div data-roll=page id=page1>...</div> <div data-roll=page id=page2>...</div> <a href=”#page1”>Page 1</a> <a href=”#page2”>Page 2</a> http://jquerymobile.com/demos/1.2.0/docs/pages/multipage- template.htmlSaturday, October 6, 12

No more #/crap/urls.html Pushstate on Relative URLs /index.html to /index.html#/foo.html to /foo.htmlSaturday, October 6, 12

Auto-Ajax Forms 1. Form action=”page.html” POST Ajax 2. Slides in New Content 3. Updates URL (same as links)Saturday, October 6, 12

I don’t use auto-ajax forms. Disable with data-ajax=falseSaturday, October 6, 12

#2 - Layout and ThemingSaturday, October 6, 12

Looking for data-* attributesSaturday, October 6, 12

Play a Role data-role=* page, header, content, footer, listview, list-divider, button, controlgroupSaturday, October 6, 12

Structure <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div> http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.htmlSaturday, October 6, 12

Magical <div data-role=header>...</div> Markup <div data-role=content>...</div> Zones <div data-role=footer>...</div>Saturday, October 6, 12

Docs Structure <div data-role=page> <div data-role=content> <div data-role=footer>Saturday, October 6, 12

ListviewSaturday, October 6, 12

Listview <ul data-role=listview ...> <li data-role=list-divider>...</li> <li><a href=”...”></a></li> <li><a href=”...”></a></li> <li><a href=”...”></a></li> <li><a href=”...”></a></li> <li><a href=”...”></a></li> ... </ul>Saturday, October 6, 12

data-* Theme Attributes • data-theme=[a-f] • data-[element]theme=[a-f] • <ul data-dividertheme=[a-f]> • <ul data-inset=true> http://jquerymobile.com/demos/1.2.0/docs/api/themes.htmlSaturday, October 6, 12

List Theming <ul data-theme=[a-f]> http://jquerymobile.com/demos/1.2.0/docs/api/themes.htmlSaturday, October 6, 12

List Theming <ul data-theme=b> <li>...</li> <li>...</li> </ul>Saturday, October 6, 12

Content Theming ui-[body|bar]-[a-f] class=”ui-bar ui-bar-c” class=”ui-body ui-body-b”Saturday, October 6, 12

e.g. Docs Theming <ul data-inset=true data-dividertheme=b ...> <ul data-inset=true data-dividertheme=f ...>Saturday, October 6, 12

Responsive Docs Example Tablet and Desktop Mobile class=content-primary class=content-secondarySaturday, October 6, 12

jQuery Mobile ThemeRoller http://jquerymobile.com/themeroller/index.phpSaturday, October 6, 12

Reusable WidgetsSaturday, October 6, 12

Buttons Link as a button <a data-role=button ...>slidedown</a> http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons- types.htmlSaturday, October 6, 12

data-* Button Theming <button data-icon=*> arrow-r, delete, plus, minus, gear, grid, refresh, etc. http://jquerymobile.com/demos/1.2.0/docs/buttons/ buttons-icons.htmlSaturday, October 6, 12

data-* Button Theming <button data-inline=true> <button data-icon=delete data-iconpos=right> http://jquerymobile.com/demos/1.2.0/docs/buttons/ buttons-icons.htmlSaturday, October 6, 12

Dialog <a data-rel=dialog> http://jquerymobile.com/demos/1.2.0/docs/pages/page-dialogs.htmlSaturday, October 6, 12

Control Group <div data-role=controlgroup data-type=horizontal> <a data-role=button>Yes</a> <a data-role=button>No</a> <a data-role=button>Maybe</a> </div> http://jquerymobile.com/demos/1.2.0/docs/buttons/ buttons-grouped.htmlSaturday, October 6, 12

Navbar data-role=navbarhttp://jquerymobile.com/demos/1.2.0/docs/toolbars/docs-navbar.htmlSaturday, October 6, 12

Navbar w/Icons http://jquerymobile.com/demos/1.2.0/docs/toolbars/ docs-navbar.htmlSaturday, October 6, 12

Filter Bar <ul data-filter=true> http://jquerymobile.com/demos/1.2.0/docs/lists/lists-search.htmlSaturday, October 6, 12

Popup Widget http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.htmlSaturday, October 6, 12

#3 Touch-friendly Form InputsSaturday, October 6, 12

Enhance Form Elements Default MOBILIZED!Saturday, October 6, 12

Saturday, October 6, 12

Slider <input type=range value=50 min=0 max=100> http://jquerymobile.com/demos/1.2.0/docs/forms/slider/Saturday, October 6, 12

Search Input <input type=search> http://jquerymobile.com/demos/1.2.0/docs/forms/search/Saturday, October 6, 12

Checkbox Set http://jquerymobile.com/demos/1.2.0/docs/forms/checkboxes/Saturday, October 6, 12

Radio Button Set http://jquerymobile.com/demos/1.2.0/docs/forms/radiobuttons/Saturday, October 6, 12

Flip Switch <select data-roll=slider> <option>Switch Off</option> <option>Switch On</option> </select> http://jquerymobile.com/demos/1.2.0/docs/forms/switch/Saturday, October 6, 12

data-native-menu=trueSaturday, October 6, 12

data-native-menu=falsehttp://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom.htmlSaturday, October 6, 12

Auto Grow Textareas http://jquerymobile.com/demos/1.2.0/docs/forms/textinputs/ index.htmlSaturday, October 6, 12

HTML5 Input Types (not just jQuery Mobile)Saturday, October 6, 12

<input type=password>Saturday, October 6, 12

<input type=number>Saturday, October 6, 12

<input type=email>Saturday, October 6, 12

<input type=url>Saturday, October 6, 12

<input type=tel>Saturday, October 6, 12

Misc NotesSaturday, October 6, 12

Widgets • page sections • controlgroup • checkboxradio • fieldcontain • select • fixheaderfooter • slider • button • textinput • listview • links • navbar • collapsible • grid • popup • dialogSaturday, October 6, 12

Download Builder http://jquerymobile.com/download-builder/Saturday, October 6, 12

Snippets Configure jQM $(document).on("mobileinit", function(){ $.extend($.mobile , { foo: bar }); }); New DOM Ready $(document).on(“pagecreate”, function(e) { // do somefin’ will ya? });Saturday, October 6, 12

Modifying DOM $page .append(“<a data-role=button>Button</a>”) .trigger(‘create’) Initializes UI componentsSaturday, October 6, 12

Viewport Tag Not auto-injected. <meta name="viewport" content="width=device-width, initial-scale=1">Saturday, October 6, 12

No JavaScript Scroll Native overflow support -webkit-overflow-scrolling: touch; No JavaScript “fake scrolling” Still problems with itSaturday, October 6, 12

CSS Transitions • New transitions turn and flow as of 1.1 • Flip on Android is Stupid (does a cartwheel)Saturday, October 6, 12

Plugins and Resources http://jquerymobile.com/resources/Saturday, October 6, 12

jQuery Mobile Router var approuter = new $.mobile.Router([ { "#certainPage": { handler: "foo", events: "s" } }, { "#certainPage": { handler: "bar", events: "h" } } ], { foo: function(...){...}, bar: function(...){...} }, options); https://github.com/azicchetti/jquerymobile-routerSaturday, October 6, 12

iOS Theme http://taitems.tumblr.com/post/7240874402/ios-inspired-jquerymobile-theme-jquery-mobileSaturday, October 6, 12

Build Latest 1. $ git clone git://github.com/jquery/jquery-mobile.git 2. $ npm install 3. $ node node_modules/.bin/grunt js $ node node_modules/.bin/grunt cssSaturday, October 6, 12

Thanks!Saturday, October 6, 12

One more thing...Saturday, October 6, 12

6 Days. 6 Intense Workshops. • JavaScript the Good Parts • Website Performance • Responsive Web Design • Agile UX Engineering • JavaScript Architecture • CSS3 In-Depth http://FrontendMasters.comSaturday, October 6, 12

Marc Grabanski @1marcSaturday, October 6, 12

http://android.programmerguru.com	15
http://us-w1.rockmelt.com	1
https://si0.twimg.com	1
https://twimg0-a.akamaihd.net	1
http://www.verious.com	1

jQuery Mobile - Web Deliver for All

by Marc Grabanski on Apr 26, 2012

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 19

Statistics

jQuery Mobile - Web Deliver for All Presentation Transcript