Your SlideShare is downloading. ×
0
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
jQuery Mobile: For Fun and Profit
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Mobile: For Fun and Profit

12,086

Published on

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

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
12,086
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
531
Comments
0
Likes
28
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×