Download as PDF, PPTX
Uploaded byDaniel Cousineau
jQuery Mobile: For Fun and Profit
The document provides an overview of jQuery Mobile, a lightweight and themable mobile web framework designed for building touch-optimized user interfaces. It emphasizes progressive enhancement, features various built-in components, and outlines the necessary HTML structure for creating mobile applications. Several code snippets demonstrate how to set up and customize pages using jQuery Mobile features and configurations.
More Related Content
![Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology](https://cdn.slidesharecdn.com/ss_thumbnails/iwtclass-10-200727152931-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
- 1. for fun andproïŹt jQuery Mobile © 2010 The jQuery Project http://jquerymobile.com/
- 2. Daniel Cousineau Interactive SoftwareEngineer @ RAPP http://dcousineau.com/ @dcousineau dcousineau@gmail.com
- 3. What Is jQueryMobile?
- 4. Multi Platform Images from jquerymobile.com
- 5. Touch-optimized & Themable Imagesfrom jquerymobile.com
- 6. Mobile Web Framework UniïŹedUser Interface My Term: Half Stack Widget Library Touch Events
- 7. Project Status Asof October 19th, 2011: RC2 This talk centers around RC1
- 8. More Details Built onjQuery Lightweight (12k compressed) Progressive Enhancement HTML5 Accessibility baked-in (WAI-ARIA) Modular & Theme-able
- 9.
- 10. Provided Interface elements Simple deviceorientation detection Tap & mobile events DOES NOT PROVIDE Geo Location, Canvas, Local Storage, etc. Remember: A âHALFâ STACK
- 11. <!DOCTYPE html> <!DOCTYPE html> <html> <html> <head> <title>Page Title</title> <head> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <title>Hello World</title> <script type="text/javascript" src="/path/to/jquery.js"></script> <script src="path/to/sencha-touch.js" type="text/javascript"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" /> <body> <script type="text/javascript"> <div data-role="page"> new Ext.Application({ <div data-role="content"> launch: function() { <p>Hello World.</p> new Ext.Panel({ </div> fullscreen: true, </div> html: 'Hello World!' </body> </html> }); } }); </script> </head> <body></body> </html> Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World
- 12. <!DOCTYPE html> <!DOCTYPE html> <html> <html> <head> <title>Page Title</title> <head> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <title>Hello World</title> <script type="text/javascript" src="/path/to/jquery.js"></script> <script src="path/to/sencha-touch.js" type="text/javascript"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" /> <body> <script type="text/javascript"> <div data-role="page"> new Ext.Application({ <div data-role="content"> launch: function() { <p>Hello World.</p> new Ext.Panel({ </div> fullscreen: true, </div> html: 'Hello World!' </body> </html> }); } }); </script> Semantic & </head> <body></body> Progressive Refinement </html> Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World
- 13. In The Beginning <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> </body> </html>
- 14. ConïŹguration ConïŹguration ONLY inmobileinit listener All mobileinit listeners deïŹned BEFORE loading jQuery Mobile
- 15. In The Beginning <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, { configurationKey: configurationValue }); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> </body> </html>
- 16. Think In Pages <divdata-role=âpageâ /> Only 1 visible at any time Multiple allowed per document You can write a single-ïŹle application Contains header, footer, and content area
- 17. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, {} ); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html>
- 18. Progressive Enhancement Uses theHTML5 data-* attributes to auto-enhance and conïŹgure widgets data-role is now the center of your world. E.g. To create a button, add a <a href=â#â data- role=âbuttonâ>LABEL</a> and jQuery Mobile will automagically set it up during page creation.
- 19. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, {} ); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <a href="#">Normal Link</a> <a href="#" data-role="button">Button</a> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html>
- 20. jQuery Mobile.com Docs http://jquerymobile.com/demos/1.0rc1
- 21. Load jQueryMobile JS mobileinit domready pagebeforechange pagebeforecreate Enhance Page pagecreate pagehide pagebeforeshow pagebeforehide Navigate pageshow pagechange
- 22. Touch Events tap taphold swipe swipeleft swiperight orientationchange scrollstart scrollstop
- 23. Normalized âVirtualâ Events vmouseover vmousedown vmousemove vmouseup vclick vmousecancel
- 24. Auto-âAJAXâ By default, alllocal links get a click listener Can be disabled Overrides default action: Fires XMLHTTP request for target Pulls <div data-role=âpageâ></div> from results, inserts into DOM Transitions to displaying the new target page
- 25. Auto-âAJAXâ By default, alllocal forms get a submission handler Same process as links, only overriding for form submit
- 26. Auto-âAJAXâ CAUTION: There isno baked-in way to pass parameters to AJAXâed pages Sever side via GET requests to back-end Use #page?key=value, manually parse window.location Disable / override hash listener
- 27.
- 28. Code Time... https://github.com/dcousineau/jQuery-Mobile-For-Fun-And-ProïŹt http://jquerymobile.com/demos/1.0rc1
- 29.
- 30.
- 31.
- 32. Advanced Learning Panel /iPad Ready Layouts http://asyraf9.github.com/jquery-mobile/
- 33.