Web Delivery for ALL!
Who?
Marc Grabanski
!
!

jQuery UI Datepicker
!

MarcGrabanski.com
!

LOTS of UI Dev
Currently...
UI/UX Development Consultant
!
!
!

Publisher of:

http://FrontendMasters.com
The Great Promise
of the Web

The web is for everyone
and all can view it
Not “Mobile Only”
Mobile First
Desktop too!
Source
Your Sources
I visited

and talked to

about
Why jQuery
Mobile?
4 Main Reasons to
Use jQuery Mobile
#1. Ajaxified
Navigation
Faster subsequent page loads

Friendly Ajax URLs
#2. Layout and
Theming Engine
Quickly style and extend styles
#3
Touch Friendly Inputs
(and widgets)
Improved UX for form inputs
#4
Widest Browser Coverage

Web living up to it’s promise
Devices Tested
jQuery Mobile Testing Lab
Fully Supported
•
•
•
•
•
•
•

iOs 3.2+, Android 2.1+/Honeycomb
Windows Phone 7
Blackberry 6.0/Playbook
Palm WebOS 1.4+
Mo...
Progressive
Enhancement
C-Grade: Basic HTML

+
++

B-Grade: Enhanced Style, No Ajax
A-Grade: Full Enhanced Style,
Ajax and...
You’ll always
see...something
it’s alive!
Gallery
http://jqmgallery.com
and growing...

http://www.google.com/trends/?q=jquery+mobile
Two popular mobile frameworks

“Web First”

“App First”

http://www.google.com/trends/?q=jquery+mobile,+sencha,+dojo
+mobi...
jQuery Mobile
+ Adobe
Embedded into Creative Suite
Sponsors jQuery Mobile Dev
Dev Snapshot
http://jquerymobile.com/test
One More
*Magical* File
Get the
(Coding)Party
Including Latest:
!

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/
jquery.mobile...
#1 - Ajaxified
Navigation
No page refresh?!
How does that work?
Looks for
href and action
in your HTML
Auto-Ajax
Links
1. Ajax gets href=”page.html” 

(unless data-ajax=false)
2. Slides in New Content
3. Updates URL

(with <b...
/index.html

*click*
/index.html

/page.html

*load*
/index.html

/page.html

*slide*
ndex.html

/page.html

*done*
Page Transitions
•

<a data-transition=pop>...</a>

(slide, slideup, slidedown, pop,
fade, flip)
!

•

<a data-transition=...
Default transition
is now fade
(more webby)
Pages w/out Ajax
<div data-roll=page 

id=page1>...</div>
<div data-roll=page

id=page2>...</div>
!

<a href=”#page1”>Page...
No more
#/crap/urls.html
Pushstate on Relative URLs




/index.html
to /index.html#/foo.html
to /foo.html
Auto-Ajax
Forms
1. Form action=”page.html”
POST Ajax
2. Slides in New Content
3. Updates URL

(same as links)

I don’t use auto-ajax
forms. Disable with
data-ajax=false
#2 - Layout and
Theming
Looking for
data-* attributes
Play a Role
data-role=*
page, header, content, footer,
listview, list-divider, button,
controlgroup
Structure
!

<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="f...
Magical
<div data-role=header>...</div>

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

Zones
<div data-role=footer>...</div>
Docs Structure
<div data-role=page>
<div data-role=content>

<div data-role=footer>
Listview
Listview
<ul data-role=listview ...>
<li data-role=list-divider>...</li>
<li><a href=”...”></a></li>
<li><a href=”...”></a...
data-* Theme
Attributes
• data-theme=[a-f]
• data-[element]theme=[a-f]
• <ul data-dividertheme=[a-f]>
• <ul data-inset=tru...
List Theming

<ul data-theme=[a-f]>

http://jquerymobile.com/demos/1.2.0/docs/api/themes.html
List Theming
<ul data-theme=b>
<li>...</li>
<li>...</li>
</ul>
Content Theming
ui-[body|bar]-[a-f]
class=”ui-bar ui-bar-c”

class=”ui-body ui-body-b”
e.g. Docs Theming

<ul data-inset=true
data-dividertheme=b ...>

<ul data-inset=true
data-dividertheme=f ...>
Responsive Docs Example
Tablet and Desktop
Mobile

class=content-primary

class=content-secondary
jQuery Mobile
ThemeRoller

http://jquerymobile.com/themeroller/index.php
Reusable
Widgets
Buttons

Link as a button
<a data-role=button ...>slidedown</a>

http://jquerymobile.com/demos/1.2.0/docs/buttons/buttonst...
data-* Button
Theming
<button data-icon=*>

arrow-r, delete, plus, minus, gear,
grid, refresh, etc.

http://jquerymobile.c...
data-* Button
Theming
<button data-inline=true>
<button data-icon=delete

data-iconpos=right>

http://jquerymobile.com/dem...
Dialog
<a data-rel=dialog>

http://jquerymobile.com/demos/1.2.0/docs/pages/page-dialogs.html
Control Group
<div data-role=controlgroup

data-type=horizontal>
<a data-role=button>Yes</a>
<a data-role=button>No</a>
<a...
Navbar
data-role=navbar

http://jquerymobile.com/demos/1.2.0/docs/toolbars/docs-navbar.html
Navbar w/Icons

http://jquerymobile.com/demos/1.2.0/docs/toolbars/
docs-navbar.html
Filter Bar

<ul data-filter=true>

http://jquerymobile.com/demos/1.2.0/docs/lists/lists-search.html
Popup Widget

http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html
#3
Touch-friendly
Form Inputs
Enhance Form
Elements
Default

MOBILIZED!
Slider
<input type=range 

value=50 min=0 max=100>

http://jquerymobile.com/demos/1.2.0/docs/forms/slider/
Search Input
<input type=search>

http://jquerymobile.com/demos/1.2.0/docs/forms/search/
Checkbox Set

http://jquerymobile.com/demos/1.2.0/docs/forms/checkboxes/
Radio Button Set

http://jquerymobile.com/demos/1.2.0/docs/forms/radiobuttons/
Flip Switch
<select data-roll=slider>
<option>Switch Off</option>
<option>Switch On</option>
</select>

http://jquerymobil...
data-native-menu=true
data-native-menu=false

http://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom.html
Auto Grow Textareas

http://jquerymobile.com/demos/1.2.0/docs/forms/textinputs/
index.html
HTML5 Input Types
(not just jQuery Mobile)
<input type=password>
<input type=number>
<input type=email>
<input type=url>
<input type=tel>
Misc Notes
Widgets
•
•
•
•
•
•
•
•

page sections
checkboxradio
select
slider
textinput
links
collapsible
popup

•
•
•
•
•
•
•
•

con...
Download Builder

http://jquerymobile.com/download-builder/
Snippets
Configure jQM
$(document).on("mobileinit", function(){
$.extend($.mobile , { foo: bar });
});
New DOM Ready
$(doc...
Modifying DOM
$page

.append(“<a data-role=button>Button</a>”)

.trigger(‘create’)
Initializes UI components
Viewport Tag
Not auto-injected.
<meta name="viewport"
content="width=device-width,
initial-scale=1">
No JavaScript
Scroll
Native overflow support
-webkit-overflow-scrolling: touch;
No JavaScript “fake scrolling”
Still probl...
CSS Transitions
•

New transitions turn and flow 

as of 1.1

•

Flip on Android is Stupid

(does a cartwheel)
Plugins and
Resources

http://jquerymobile.com/resources/
jQuery Mobile Router
var approuter = new $.mobile.Router([
{ "#certainPage": { handler: "foo", events: "s" } },
{ "#certai...
jQuery Mobile
Router Lite
$.mobile.routerlite.routeinit("/admin",
function(page, path){
doSomething();
});
$.mobile.router...
iOS Theme

http://taitems.tumblr.com/post/7240874402/ios-inspired-jquerymobile-theme-jquery-mobile
Thanks!
Marc Grabanski
@1marc
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
Upcoming SlideShare
Loading in...5
×

Introduction to jQuery Mobile - Web Deliver for All

27,429

Published on

Mobile web development frameworks are targeting the builtin web browsers on iPhone and Android only; however, jQuery mobile has in a different vision, one that will reach the largest distribution of phones possible. Leveraging the ways of progressive enhancement, your website can be viewed in raw HTML on old mobile phones and then enhanced with nice CSS styles across mobile platforms that have a decent CSS and JavaScript support. In this session, Grabanski gives you his list of reasons to use jQuery mobile, an overview of the framework and will draw from his experiences building websites on top of jQuery Mobile.

Published in: Technology
1 Comment
20 Likes
Statistics
Notes
  • Good job!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
27,429
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
348
Comments
1
Likes
20
Embeds 0
No embeds

No notes for slide

Introduction to jQuery Mobile - Web Deliver for All

  1. 1. Web Delivery for ALL!
  2. 2. Who? Marc Grabanski ! ! jQuery UI Datepicker ! MarcGrabanski.com ! LOTS of UI Dev
  3. 3. Currently... UI/UX Development Consultant ! ! ! Publisher of: http://FrontendMasters.com
  4. 4. The Great Promise of the Web The web is for everyone and all can view it
  5. 5. Not “Mobile Only” Mobile First
  6. 6. Desktop too!
  7. 7. Source Your Sources
  8. 8. I visited and talked to about
  9. 9. Why jQuery Mobile?
  10. 10. 4 Main Reasons to Use jQuery Mobile
  11. 11. #1. Ajaxified Navigation Faster subsequent page loads Friendly Ajax URLs
  12. 12. #2. Layout and Theming Engine Quickly style and extend styles
  13. 13. #3 Touch Friendly Inputs (and widgets) Improved UX for form inputs
  14. 14. #4 Widest Browser Coverage Web living up to it’s promise
  15. 15. Devices Tested jQuery Mobile Testing Lab
  16. 16. 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+, Opera
  17. 17. Progressive Enhancement C-Grade: Basic HTML + ++ B-Grade: Enhanced Style, No Ajax A-Grade: Full Enhanced Style, Ajax and CSS Transitions
  18. 18. You’ll always see...something
  19. 19. it’s alive!
  20. 20. Gallery http://jqmgallery.com
  21. 21. and growing... http://www.google.com/trends/?q=jquery+mobile
  22. 22. Two popular mobile frameworks “Web First” “App First” http://www.google.com/trends/?q=jquery+mobile,+sencha,+dojo +mobile,+jqmobi
  23. 23. jQuery Mobile + Adobe Embedded into Creative Suite Sponsors jQuery Mobile Dev
  24. 24. Dev Snapshot http://jquerymobile.com/test
  25. 25. One More *Magical* File
  26. 26. 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/
  27. 27. #1 - Ajaxified Navigation
  28. 28. No page refresh?! How does that work?
  29. 29. Looks for href and action in your HTML
  30. 30. 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)
  31. 31. /index.html *click*
  32. 32. /index.html /page.html *load*
  33. 33. /index.html /page.html *slide*
  34. 34. ndex.html /page.html *done*
  35. 35. 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/pagetransitions.html
  36. 36. Default transition is now fade (more webby)
  37. 37. 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/multipagetemplate.html
  38. 38. No more #/crap/urls.html Pushstate on Relative URLs
 
 /index.html to /index.html#/foo.html to /foo.html
  39. 39. Auto-Ajax Forms 1. Form action=”page.html” POST Ajax 2. Slides in New Content 3. Updates URL
 (same as links)

  40. 40. I don’t use auto-ajax forms. Disable with data-ajax=false
  41. 41. #2 - Layout and Theming
  42. 42. Looking for data-* attributes
  43. 43. Play a Role data-role=* page, header, content, footer, listview, list-divider, button, controlgroup
  44. 44. 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.html
  45. 45. Magical <div data-role=header>...</div> Markup <div data-role=content>...</div> Zones <div data-role=footer>...</div>
  46. 46. Docs Structure <div data-role=page> <div data-role=content> <div data-role=footer>
  47. 47. Listview
  48. 48. 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>
  49. 49. 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.html
  50. 50. List Theming <ul data-theme=[a-f]> http://jquerymobile.com/demos/1.2.0/docs/api/themes.html
  51. 51. List Theming <ul data-theme=b> <li>...</li> <li>...</li> </ul>
  52. 52. Content Theming ui-[body|bar]-[a-f] class=”ui-bar ui-bar-c” class=”ui-body ui-body-b”
  53. 53. e.g. Docs Theming <ul data-inset=true data-dividertheme=b ...> <ul data-inset=true data-dividertheme=f ...>
  54. 54. Responsive Docs Example Tablet and Desktop Mobile class=content-primary class=content-secondary
  55. 55. jQuery Mobile ThemeRoller http://jquerymobile.com/themeroller/index.php
  56. 56. Reusable Widgets
  57. 57. Buttons Link as a button <a data-role=button ...>slidedown</a> http://jquerymobile.com/demos/1.2.0/docs/buttons/buttonstypes.html
  58. 58. 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.html
  59. 59. 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.html
  60. 60. Dialog <a data-rel=dialog> http://jquerymobile.com/demos/1.2.0/docs/pages/page-dialogs.html
  61. 61. 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.html
  62. 62. Navbar data-role=navbar http://jquerymobile.com/demos/1.2.0/docs/toolbars/docs-navbar.html
  63. 63. Navbar w/Icons http://jquerymobile.com/demos/1.2.0/docs/toolbars/ docs-navbar.html
  64. 64. Filter Bar <ul data-filter=true> http://jquerymobile.com/demos/1.2.0/docs/lists/lists-search.html
  65. 65. Popup Widget http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html
  66. 66. #3 Touch-friendly Form Inputs
  67. 67. Enhance Form Elements Default MOBILIZED!
  68. 68. Slider <input type=range 
 value=50 min=0 max=100> http://jquerymobile.com/demos/1.2.0/docs/forms/slider/
  69. 69. Search Input <input type=search> http://jquerymobile.com/demos/1.2.0/docs/forms/search/
  70. 70. Checkbox Set http://jquerymobile.com/demos/1.2.0/docs/forms/checkboxes/
  71. 71. Radio Button Set http://jquerymobile.com/demos/1.2.0/docs/forms/radiobuttons/
  72. 72. 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/
  73. 73. data-native-menu=true
  74. 74. data-native-menu=false http://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom.html
  75. 75. Auto Grow Textareas http://jquerymobile.com/demos/1.2.0/docs/forms/textinputs/ index.html
  76. 76. HTML5 Input Types (not just jQuery Mobile)
  77. 77. <input type=password>
  78. 78. <input type=number>
  79. 79. <input type=email>
  80. 80. <input type=url>
  81. 81. <input type=tel>
  82. 82. Misc Notes
  83. 83. Widgets • • • • • • • • page sections checkboxradio select slider textinput links collapsible popup • • • • • • • • controlgroup fieldcontain fixheaderfooter button listview navbar grid dialog
  84. 84. Download Builder http://jquerymobile.com/download-builder/
  85. 85. Snippets Configure jQM $(document).on("mobileinit", function(){ $.extend($.mobile , { foo: bar }); }); New DOM Ready $(document).on(“pagecreate”, function(e) { // do somefin’ will ya? });
  86. 86. Modifying DOM $page
 .append(“<a data-role=button>Button</a>”)
 .trigger(‘create’) Initializes UI components
  87. 87. Viewport Tag Not auto-injected. <meta name="viewport" content="width=device-width, initial-scale=1">
  88. 88. No JavaScript Scroll Native overflow support -webkit-overflow-scrolling: touch; No JavaScript “fake scrolling” Still problems with it
  89. 89. CSS Transitions • New transitions turn and flow 
 as of 1.1 • Flip on Android is Stupid
 (does a cartwheel)
  90. 90. Plugins and Resources http://jquerymobile.com/resources/
  91. 91. 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-router
  92. 92. jQuery Mobile Router Lite $.mobile.routerlite.routeinit("/admin", function(page, path){ doSomething(); }); $.mobile.routerlite.routechange("/admin", function(page, path){ doSomething(); }); https://github.com/1Marc/jquery-mobile-routerlite
  93. 93. iOS Theme http://taitems.tumblr.com/post/7240874402/ios-inspired-jquerymobile-theme-jquery-mobile
  94. 94. Thanks!
  95. 95. Marc Grabanski @1marc
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×