jQuery Mobile: For Fun and Profit

13,617
-1

Published on

Talk given at Where 2.0 2011 in Santa Clara, CA.

Code samples here: https://github.com/dcousineau/jQuery-Mobile-For-Fun-And-Profit

Published in: Technology, Business
0 Comments
28 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,617
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
533
Comments
0
Likes
28
Embeds 0
No embeds

No notes for slide

jQuery Mobile: For Fun and Profit

  1. for fun and profitjQuery Mobile © 2010 The jQuery Project http://jquerymobile.com/
  2. Daniel CousineauInteractive Software Engineer @ RAPPhttp://dcousineau.com/@dcousineaudcousineau@gmail.com
  3. What Is jQuery Mobile?
  4. Multi PlatformImages from jquerymobile.com
  5. Touch-optimized & ThemableImages from jquerymobile.com
  6. Mobile Web FrameworkUnified User InterfaceMy Term: Half StackWidget LibraryTouch Events
  7. Project Status As of October 19th, 2011: RC2 This talk centers around RC1
  8. More DetailsBuilt on jQueryLightweight (12k compressed)Progressive EnhancementHTML5Accessibility baked-in (WAI-ARIA)Modular & Theme-able
  9. jQuery Mobile Primer
  10. ProvidedInterface elementsSimple device orientation detectionTap & mobile eventsDOES NOT PROVIDE Geo Location, Canvas, LocalStorage, 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<!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 type="text/javascript" src="/path/to/jquery.mobile.js"></script></head><body></body></html>
  14. ConfigurationConfiguration ONLY in mobileinit listenerAll mobileinit listeners defined BEFORE loadingjQuery Mobile
  15. In The Beginning<!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, { configurationKey: configurationValue }); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script></head><body></body></html>
  16. Think In Pages<div data-role=”page” />Only 1 visible at any timeMultiple allowed per document You can write a single-file applicationContains 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 EnhancementUses the HTML5 data-* attributes to auto-enhanceand configure widgetsdata-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 willautomagically 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, all local links get a click listenerCan be disabledOverrides 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, all local forms get a submission handlerSame process as links, only overriding for form submit
  26. Auto-‘AJAX’CAUTION: There is no baked-in way to passparameters to AJAX’ed pagesSever side via GET requests to back-endUse #page?key=value, manually parse window.locationDisable / override hash listener
  27. Learn By Doing
  28. Code Time...https://github.com/dcousineau/jQuery-Mobile-For-Fun-And-Profit http://jquerymobile.com/demos/1.0rc1
  29. Wrap Up
  30. http://jqmgallery.com/
  31. Resources@jquerymobilehttp://jquerymobile.com/blog/http://jquerymobile.com/demos/1.0rc1
  32. Advanced LearningPanel / iPad Ready Layouts http://asyraf9.github.com/jquery-mobile/
  33. http://joind.in/3762

×