Beginning jQuery Mobile
•Download as KEY, PDF•
3 likes•1,126 views
The document provides an introduction to jQuery Mobile, covering what topics will and won't be covered. It discusses the basics of jQuery Mobile including page structure, dynamic DOM manipulation, HTML5 pseudo-attributes, form elements, lists, multi-page apps, and events. It also offers tips on debugging, performance, and links to additional resources for learning jQuery Mobile.
Report
Share
Beginning jQuery Mobile
- 1. Beginning jQuery Mobile or Enough to Get You Started, but not Enough to Make You Dangerous
- 2. Who Am I? I am a Microsoft Certified Solution Developer and I’ve been developing software since 1979. Since 2009, I have been focused on developing mobile applications, for iPhone, Android, Windows Phone 7, and the mobile web.
- 3. What We Won’t Cover • The Server Side • HTML5 in Depth • Validation • Device Apps
- 4. What We Will Cover • jQuery Mobile Intro. • How it Works • Form Elements • List Magic • Multi-Page Apps • Events
- 5. What We Will Cover • The Kernel • The ThemeRoller • Debugging • Performance Tips • Summary • Links
- 6. Quick Intro to jQuery Mobile A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily theme-able design.
- 7. Demo #1
- 8. Page Structure • Header • Footer • Content Area
- 9. Header • Page Title • Left Button • Right Button
- 11. Content Area This is where your stuff goes.
- 12. How It Works • Dynamic DOM Manipulation • HTML5 Pseudo-Attributes • There is no free lunch
- 13. Dynamic DOM Manipulation • Show the Original Markup • Show the “Annotated” Markup
- 14. HTML5 Pseudo- Attributes • JQM Uses Pseudo-Attributes (data-) • Standard Browser Behavior - Ignore Unknown Attributes • Allows for Some Functionality on low-end browsers
- 15. Form Elements (aka widgets) • buttons • sliders • radio buttons • checkboxes • select menus • etc.
- 16. Lists • Basic Lists • Nested Lists • List Dividers • Split Lists • etc.
- 17. Multi-Page Apps • basic setup • transitions • passing data between pages
- 18. Events
- 19. Touch • tap • taphold • swipe • swipeleft • swiperight
- 20. Page • Page Load • Page Change • Page Transitions • Page Initialization • Page Remove • Layout
- 21. Page Load • pagebeforeload • pageload • pageloadfailed
- 22. Page Change • pagebeforechange • pagechange • pagechangefailed
- 23. Page Transition • pagebeforeshow • pageshow • pagebeforehide • pagehide
- 24. Page Create • pagebeforecreate • pagecreate • pageinit
- 25. Miscellaneous • pageremove • updatelayout • orientationchange
- 26. PerformanceTips • Watch the size of the DOM • Selectors • Narrow Them • Cache Them • Reference the active Page
- 27. Debugging • What’s the Problem? • Analogues • WEINRE & Adobe Shadow • iWebInspector • Opera Mobile Emulator
- 28. Analogues In biochemistry, an analog is a substance that is similar, but not identical, to another. For us, it is a browser that is similar, but not identical, to the one we wish to test.
- 29. Analogues • iPhone - Safari • Android - Chrome • Windows Phone 7 - IE • Blackberry - Safari/Chrome
- 30. Analogues Don’t assume that if it works on the analog, it will work on the device. Always test on a device.
- 31. WEINRE • Created by Patrick Mueller in JavaScript • WEb INspector REmote (pronounced like winery) • WebKit Only! (It uses built in hooks) • Allows for inspection of HTML/CSS • Remote console.log • NOT A DEBUGGER
- 32. Adobe Shadow • Chrome Extension + iOS app & Android app • WEINRE with a better UI • Inspection of HTML/CSS • Remote console.log • NOT A DEBUGGER
- 33. iWebInspector • Runs only on the iOS Simulator • Inspection of HTML/CSS • Remote console.log • True Remote Debugging
- 34. Opera Mobile Emulator • Runs using desktop Opera & Opera Mobile or Opera Mobile Emulator • Inspection of HTML/CSS • Remote console.log • True Remote Debugger
- 35. Sencha Touch 2.0
- 36. Sencha Touch 2.0 <!DOCTYPE html> <html> <head> <title>Hello World</title> <script src="lib/touch/sencha-touch.js" type="text/ javascript"></script> <script src="app/app.js" type="text/javascript"></ script> <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /> </head> <body></body> </html>
- 37. Sencha Touch 2.0 new Ext.Application({ launch: function() { new Ext.Panel({ fullscreen: true, dockedItems: [{xtype:'toolbar', title:'My First App'}], layout: 'fit', styleHtmlContent: true, html: '<h2>Hello World!</h2>I did it!' }); } });
- 38. jQuery Mobile... • is free and open source • uses regular web programing paradigms • is easy
- 39. Useful URLs • http://jquerymobile.com/ • http://www.JSLint.com • http://www.JSHint.com • http://people.apache.org/~pmuellr/weinre/ docs/1.x/1.5.0/
- 40. Useful URLs • http://labs.adobe.com/technologies/shadow/ • http://www.iwebinspector.com/ • http://www.opera.com/developer/tools/ mobile/
- 41. Books • jQuery Mobile Jon Reid Sebastopol, CA: O’Reilly Media Inc., 2011 • Master Mobile Web Apps with jQuery Mobile 2nd ed. Matt Doyle Brighton, UK: Elated Communications Ltd, 2011
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- Yes - blackberry use webkit too. Microsoft is the lone hold out\nImportant to note that webkit is not an open source browser, \nbut an open source browser engine kit. \nSafari and Chrome are not identical.\n
- Test, test, test.\nAnalogs are a convenience tool but not a substitute for device testing. \n(turn phone side ways)\n
- JavaScript is important to note because it explains a lot of its shortcomings.\nAll of these tools are free!\n
- Very similar to WEINRE in function. I thought it was WEINRE version 2.0 or something at first\n
- This is a must have if you are supporting the iPhone!\n\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n