• Like

Introduction to jQuery Mobile - Web Deliver for All

  • 25,508 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Good job!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
25,508
On Slideshare
0
From Embeds
0
Number of Embeds
14

Actions

Shares
Downloads
318
Comments
1
Likes
17

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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

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