Introduction to jQuery Mobile - Web Deliver for All
28 likes•34,874 views
The document discusses the benefits and features of jQuery Mobile, focusing on its user-friendly interface, AJAX navigation, and extensive browser compatibility. It highlights key functionalities such as touch-friendly inputs, a theming engine, and responsive design options for both mobile and desktop users. Additionally, the document provides resources and code examples for implementing jQuery Mobile in web development projects.
![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](https://cdn.statically.io/img/image.slidesharecdn.com/marcgrabanski-jquerymobilelowres-120426184708-phpapp02/85/Introduction-to-jQuery-Mobile-Web-Deliver-for-All-50-320.jpg)
![List Theming
<ul data-theme=[a-f]>
http://jquerymobile.com/demos/1.2.0/docs/api/themes.html](https://cdn.statically.io/img/image.slidesharecdn.com/marcgrabanski-jquerymobilelowres-120426184708-phpapp02/85/Introduction-to-jQuery-Mobile-Web-Deliver-for-All-51-320.jpg)
![Content Theming
ui-[body|bar]-[a-f]
class=”ui-bar ui-bar-c”
class=”ui-body ui-body-b”](https://cdn.statically.io/img/image.slidesharecdn.com/marcgrabanski-jquerymobilelowres-120426184708-phpapp02/85/Introduction-to-jQuery-Mobile-Web-Deliver-for-All-53-320.jpg)
![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](https://cdn.statically.io/img/image.slidesharecdn.com/marcgrabanski-jquerymobilelowres-120426184708-phpapp02/85/Introduction-to-jQuery-Mobile-Web-Deliver-for-All-93-320.jpg)
Introduction to jQuery Mobile - Web Deliver for All
- 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
- 6. Not “Mobile Only” Mobile First
- 7. Desktop too!
- 9. I visited and talked to about
- 11. 4 Main Reasons to Use jQuery Mobile
- 12. #1. Ajaxified Navigation Faster subsequent page loads Friendly Ajax URLs
- 13. #2. Layout and Theming Engine Quickly style and extend styles
- 14. #3 Touch Friendly Inputs (and widgets) Improved UX for form inputs
- 15. #4 Widest Browser Coverage Web living up to it’s promise
- 16. Devices Tested jQuery Mobile Testing Lab
- 17. 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
- 18. Progressive Enhancement C-Grade: Basic HTML + ++ B-Grade: Enhanced Style, No Ajax A-Grade: Full Enhanced Style, Ajax and CSS Transitions
- 20. it’s alive!
- 23. Two popular mobile frameworks “Web First” “App First” http://www.google.com/trends/?q=jquery+mobile,+sencha,+dojo +mobile,+jqmobi
- 24. jQuery Mobile + Adobe Embedded into Creative Suite Sponsors jQuery Mobile Dev
- 27. 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/
- 29. No page refresh?! How does that work?
- 30. Looks for href and action in your HTML
- 31. 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)
- 36. 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
- 37. Default transition is now fade (more webby)
- 38. 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
- 39. No more #/crap/urls.html Pushstate on Relative URLs /index.html to /index.html#/foo.html to /foo.html
- 40. Auto-Ajax Forms 1. Form action=”page.html” POST Ajax 2. Slides in New Content 3. Updates URL (same as links)
- 41. I don’t use auto-ajax forms. Disable with data-ajax=false
- 42. #2 - Layout and Theming
- 44. Play a Role data-role=* page, header, content, footer, listview, list-divider, button, controlgroup
- 45. 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
- 46. Magical <div data-role=header>...</div> Markup <div data-role=content>...</div> Zones <div data-role=footer>...</div>
- 47. Docs Structure <div data-role=page> <div data-role=content> <div data-role=footer>
- 48. Listview
- 49. 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>
- 50. 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
- 54. e.g. Docs Theming <ul data-inset=true data-dividertheme=b ...> <ul data-inset=true data-dividertheme=f ...>
- 55. Responsive Docs Example Tablet and Desktop Mobile class=content-primary class=content-secondary
- 57. Reusable Widgets
- 58. Buttons Link as a button <a data-role=button ...>slidedown</a> http://jquerymobile.com/demos/1.2.0/docs/buttons/buttonstypes.html
- 59. 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
- 60. 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
- 62. 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
- 65. Filter Bar <ul data-filter=true> http://jquerymobile.com/demos/1.2.0/docs/lists/lists-search.html
- 70. Slider <input type=range value=50 min=0 max=100> http://jquerymobile.com/demos/1.2.0/docs/forms/slider/
- 74. 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/
- 78. HTML5 Input Types (not just jQuery Mobile)
- 82. <input type=url>
- 83. <input type=tel>
- 84. Misc Notes
- 87. Snippets Configure jQM $(document).on("mobileinit", function(){ $.extend($.mobile , { foo: bar }); }); New DOM Ready $(document).on(“pagecreate”, function(e) { // do somefin’ will ya? });
- 88. Modifying DOM $page .append(“<a data-role=button>Button</a>”) .trigger(‘create’) Initializes UI components
- 89. Viewport Tag Not auto-injected. <meta name="viewport" content="width=device-width, initial-scale=1">
- 90. No JavaScript Scroll Native overflow support -webkit-overflow-scrolling: touch; No JavaScript “fake scrolling” Still problems with it
- 91. CSS Transitions • New transitions turn and flow as of 1.1 • Flip on Android is Stupid (does a cartwheel)
- 93. 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
- 94. 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
- 95. iOS Theme http://taitems.tumblr.com/post/7240874402/ios-inspired-jquerymobile-theme-jquery-mobile
- 96. Thanks!