Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Todd Parker & Scott Jehl : jQuery Mobile Keynot...

scottjehl
October 01, 2011

Todd Parker & Scott Jehl : jQuery Mobile Keynote 2011

The jQuery Mobile Keynote delivered at jQuery Conference Fall 2011 in Boston, MA.

scottjehl

October 01, 2011
Tweet

More Decks by scottjehl

Other Decks in Design

Transcript

  1. filament group We design engaging sites and applications that are

    simple to use and accessible to everyone.
  2. July 2011 World Mobile Browsers 4.01 12.3 17.1 18.17 19.95

    22.07 Opera iPhone / iPod Touch Android Nokia BlackBerry Netfront http://gs.statcounter.com/#mobile_browser-ww-monthly-201103-201103-bar
  3. Tim Berners-Lee July 1996 “Anyone who slaps a ‘this page

    is best viewed with Browser X’ label on a web page appears to be yearning for the bad old days [...]”
  4. Don’t break the web. Bookmark / Refresh Friendly URLS History

    Works Now with PushState! jquerymobile.com/test/docs/api/globalconfig.html
  5. <!DOCTYPE html> <html> <head> <title>My Web App</title> <style>body {text-align: center;

    }</style> </head> <body> <h1>Welcome to my site!</h1> <p><a href=”contact.html”>Contact</a></p> </body> </html>
  6. <!DOCTYPE html> <html> <head> <title>My Web App</title> <style>body { text-align:

    center; }</style> <meta name="viewport" content="width=device-width,initial- scale=1"> <link rel="stylesheet" href="jquery.mobile.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script> </head> <body> <h1>Welcome to my Site!</h1> <p><a href="contact.html" data-role="button">Contact</a></p> </body> </html>
  7. Page containers are.... • used to group “pages” in DOM

    • auto-generated for you • any kind of element you’d like
  8. <body> <div data-role="page" id="home"></div> <div data-role="page" id="products"></div> <div data-role="page" id="services"></div>

    <div data-role="page" id="about"></div> <div data-role="page" id="contact"></div> </body> ID’d sections
  9. pros / cons •May lend a “native” app feel. •Useful

    in certain simple UI situations: full-page photo galleries, etc. •Often translate poorly to desktop. •Only feel “native” to iOS users •Uncanny Valley
  10. <div data-role="content"> <p>Hello world</p> <ul data-role="listview"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li>

    <li><a href="about.html">About us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!-- /content --> List with links
  11. All Page Change Events • pagebeforechange • pagebeforeshow • pagebeforehide

    • pageshow • pagehide • pageremove • pagechange
  12. Also. • URL bar hidden: iOS + Android • Smoother

    transitions • Improved URL Handling • Pinch zooming enabled • Auto Back buttons OFF
  13. Widget Decoupling • header/content/footer • collapsible • controlgroup • fieldcontain

    • fixheaderfooter • button • checkboxradio • select • slider • textinput • links theming • listview • navbar • grid
  14. New create event $( ...new markup that contains widgets... )

    .appendTo( ".ui-page" ) .trigger( "create" );
  15. Thanks core team! • Kin Blas ( Adobe ) •

    John Bender ( Adobe ) • Ghislain Seguin ( Jive )