Introduction to jQuery Mobile - Web Deliver for All
•
28 likes•34,853 views
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.
Report
Share
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!