jQuery Mobile: For Fun and Profit
Upcoming SlideShare
Loading in...5
×
 

jQuery Mobile: For Fun and Profit

on

  • 12,679 views

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

Statistics

Views

Total Views
12,679
Views on SlideShare
11,948
Embed Views
731

Actions

Likes
28
Downloads
469
Comments
0

32 Embeds 731

http://www.techiegyan.com 265
http://where2conf.com 69
http://localhost:8080 59
http://www.blog.deitek.com 48
http://lanyrd.com 45
http://judewa.com 43
http://eventifier.local 41
http://abava.blogspot.com 34
http://paper.li 31
http://whereconf.com 22
http://demo.friendika.com 21
https://lanyrd.com 20
http://abava.blogspot.ru 5
http://twitter.com 4
http://socialogicmarketing.com 3
http://us-w1.rockmelt.com 2
http://www.webdocsecure.com 2
http://abava.blogspot.co.uk 2
http://coderwall.com 2
http://www.linkedin.com 1
http://lafarineravic.blogspot.com 1
http://abava.blogspot.co.il 1
http://translate.googleusercontent.com 1
http://feeds.feedburner.com 1
http://beta.teamlife.it 1
https://ctcctest-bblearn.blackboard.com 1
http://www.adolfoquintas.com.br 1
http://dyb.local 1
http://static.slidesharecdn.com 1
http://beta.newsrivr.com 1
http://vialactea-integracion:9080 1
http://api.embed.ly 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Mobile: For Fun and Profit jQuery Mobile: For Fun and Profit Presentation Transcript

  • for fun and profitjQuery Mobile © 2010 The jQuery Project http://jquerymobile.com/
  • Daniel CousineauInteractive Software Engineer @ RAPPhttp://dcousineau.com/@dcousineaudcousineau@gmail.com
  • What Is jQuery Mobile?
  • Multi PlatformImages from jquerymobile.com
  • Touch-optimized & ThemableImages from jquerymobile.com
  • Mobile Web FrameworkUnified User InterfaceMy Term: Half StackWidget LibraryTouch Events
  • Project Status As of October 19th, 2011: RC2 This talk centers around RC1
  • More DetailsBuilt on jQueryLightweight (12k compressed)Progressive EnhancementHTML5Accessibility baked-in (WAI-ARIA)Modular & Theme-able
  • jQuery Mobile Primer
  • ProvidedInterface elementsSimple device orientation detectionTap & mobile eventsDOES NOT PROVIDE Geo Location, Canvas, LocalStorage, etc. Remember: A ‘HALF’ STACK
  • <!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
  • <!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
  • 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>
  • ConfigurationConfiguration ONLY in mobileinit listenerAll mobileinit listeners defined BEFORE loadingjQuery Mobile
  • 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>
  • 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
  • <!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>
  • 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.
  • <!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>
  • jQuery Mobile.com Docs http://jquerymobile.com/demos/1.0rc1
  • Load jQueryMobile JS mobileinit domready pagebeforechange pagebeforecreate Enhance Page pagecreate pagehide pagebeforeshow pagebeforehide Navigate pageshow pagechange
  • Touch Events tap taphold swipe swipeleft swiperight orientationchange scrollstart scrollstop
  • Normalized “Virtual” Events vmouseover vmousedown vmousemove vmouseup vclick vmousecancel
  • 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
  • Auto-‘AJAX’By default, all local forms get a submission handlerSame process as links, only overriding for form submit
  • 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
  • Learn By Doing
  • Code Time...https://github.com/dcousineau/jQuery-Mobile-For-Fun-And-Profit http://jquerymobile.com/demos/1.0rc1
  • Wrap Up
  • http://jqmgallery.com/
  • Resources@jquerymobilehttp://jquerymobile.com/blog/http://jquerymobile.com/demos/1.0rc1
  • Advanced LearningPanel / iPad Ready Layouts http://asyraf9.github.com/jquery-mobile/
  • http://joind.in/3762