Introduction to jQuery Mobile - Web Deliver for All

28,861
-1

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
28,861
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
379
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

×