Advanced JQuery Mobile tutorial with Phonegap
Die SlideShare-Präsentation wird heruntergeladen.
×
![data-* Theme
Attributes
• data-theme=[a-f]
• data-[element]theme=[a-f]
• <ul data-dividertheme=[a-f]>
• <ul data-inset=tru...](https://image.slidesharecdn.com/marcgrabanski-jquerymobilelowres-120426184708-phpapp02/75/introduction-to-jquery-mobile-web-deliver-for-all-49-2048.jpg?cb=1666638491)
![List Theming
<ul data-theme=[a-f]>
http://jquerymobile.com/demos/1.2.0/docs/api/themes.html](https://image.slidesharecdn.com/marcgrabanski-jquerymobilelowres-120426184708-phpapp02/75/introduction-to-jquery-mobile-web-deliver-for-all-50-2048.jpg?cb=1666638491)
![Content Theming
ui-[body|bar]-[a-f]
class=”ui-bar ui-bar-c”
class=”ui-body ui-body-b”](https://image.slidesharecdn.com/marcgrabanski-jquerymobilelowres-120426184708-phpapp02/75/introduction-to-jquery-mobile-web-deliver-for-all-52-2048.jpg?cb=1666638491)
Hier ansehen
Weitere Verwandte Inhalte
Diashows für Sie (20)
Andere mochten auch (20)
Ähnlich wie Introduction to jQuery Mobile - Web Deliver for All (20)
Aktuellste (20)
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
- 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
