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

Cross-Platform Mobile Apps With jQuery Mobile

Mike Bobiney
November 10, 2011

Cross-Platform Mobile Apps With jQuery Mobile

jQuery is the hugely popular JavaScript framework that powers nearly half of the top ten thousand most visited websites. You’ll learn how you can use these everyday web technologies to create compelling mobile experiences for your visitors while still supporting older devices. We’ll be covering topics such as navigational structure, layouts, toolbars and the all important list view. But just building a mobile site will only get you so far. You’ll also learn techniques to improve your page load times and tips to roll your own theme with style sheets and icons to help your apps stand out from the crowd.

Mike Bobiney

November 10, 2011
Tweet

Other Decks in Programming

Transcript

  1. Mike Bobiney • Owner, Tap Through Apps LLC • Work

    for Vectorform.com • Bunch of iOS dev & emerging tech
  2. Mike Bobiney • Owner, Tap Through Apps LLC • Work

    for Vectorform.com • Bunch of iOS dev & emerging tech • 6+ years of enterprise web dev with ASP.NET
  3. Mike Bobiney • Owner, Tap Through Apps LLC • Work

    for Vectorform.com • Bunch of iOS dev & emerging tech • 6+ years of enterprise web dev with ASP.NET • DetroitRuby.org User Group
  4. Mike Bobiney • Owner, Tap Through Apps LLC • Work

    for Vectorform.com • Bunch of iOS dev & emerging tech • 6+ years of enterprise web dev with ASP.NET • DetroitRuby.org User Group • Homebrewer
  5. • A library that simplifies JavaScript with features like selectors,

    event handling and Ajax interactions and is supported cross- browser.
  6. • A library that simplifies JavaScript with features like selectors,

    event handling and Ajax interactions and is supported cross- browser. Open Source
  7. • Not an alternative to jQuery but rather built upon

    it • Used to build accessible touch-friendly mobile UI
  8. • Not an alternative to jQuery but rather built upon

    it • Used to build accessible touch-friendly mobile UI • Built on jQuery 1.6.4 and jQuery 1.7.1 support is coming soon but should be okay to use
  9. • Not an alternative to jQuery but rather built upon

    it • Used to build accessible touch-friendly mobile UI • Built on jQuery 1.6.4 and jQuery 1.7.1 support is coming soon but should be okay to use
  10. jQueryMobile != jqTouch "While a few frameworks exist now (such

    as jQTouch, iUI, and Sencha Touch) none of them even attempt to provide a consistent experience beyond the safety of iOS, Android, and webOS." - John Resig
  11. 3-Level Graded Browser Support Progressive Enhancement • C-Grade: Basic HTML

    • B-Grade: Enhanced Style, No Ajax • A-Grade: Full Enhanced Style, Ajax and CSS Transitions
  12. Grade A Apple iOS 3.2-5.0 Android 2.1-2.3 Android Honeycomb Windows

    Phone 7-7.5 Blackberry 6.0 Blackberry 7 Blackberry Playbook Palm WebOS (1.4-3.0) HP Touchpad Opera Mobile 11.0 Kindle 3 and Fire http://jquerymobile.com/gbs/
  13. Grade A Apple iOS 3.2-5.0 Android 2.1-2.3 Android Honeycomb Windows

    Phone 7-7.5 Blackberry 6.0 Blackberry 7 Blackberry Playbook Palm WebOS (1.4-3.0) HP Touchpad Opera Mobile 11.0 Kindle 3 and Fire Most current desktop browser http://jquerymobile.com/gbs/
  14. Grade A Apple iOS 3.2-5.0 Android 2.1-2.3 Android Honeycomb Windows

    Phone 7-7.5 Blackberry 6.0 Blackberry 7 Blackberry Playbook Palm WebOS (1.4-3.0) HP Touchpad Opera Mobile 11.0 Kindle 3 and Fire Most current desktop browser http://jquerymobile.com/gbs/ Grade B Blackberry 5.0 Opera Mini (5.0-6.0) Nokia Symbian
  15. Grade A Apple iOS 3.2-5.0 Android 2.1-2.3 Android Honeycomb Windows

    Phone 7-7.5 Blackberry 6.0 Blackberry 7 Blackberry Playbook Palm WebOS (1.4-3.0) HP Touchpad Opera Mobile 11.0 Kindle 3 and Fire Most current desktop browser http://jquerymobile.com/gbs/ Grade B Blackberry 5.0 Opera Mini (5.0-6.0) Nokia Symbian Grade C Blackberry 4.x Windows Mobile aka “feature phones” No media queries support
  16. <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Page Title</title> <!-- the three things that jQuery Mobile needs to work --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>My Page</h1> </div> <div data-role="content"> <p>My page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html>
  17. <div  data-­‐role="header"> <div  data-­‐role="content"> <div  data-­‐role="footer"> <div  data-­‐role="page"  id=”about”> <div

     data-­‐role="header"> <div  data-­‐role="content"> <div  data-­‐role="footer"> Multi Page Structure (embedded) <div  data-­‐role="page"> <div  data-­‐role="page"  id=”home”>
  18. Links to embedded pages <a  href="#about">About  this  app</a> Links to

    external pages <a  href="about.html">About  this  app</a>
  19. PRO TIP / Good Idea Include links to the jQuery

    and jQuery Mobile scripts in the head section of each document, so that the documents are stand-alone and can be bookmarked if necessary.
  20. Whip those anchor links into shape! Buttons defaults to full

    width <a href="#about" data-role="button">About this app</a>
  21. Grouped Buttons <ul data-role="controlgroup" data-type="horizontal"> <li><a href="index.html" data-role="button" class="ui-btn-active">Basics</a></li> <li><a

    href="options.html" data-role="button">Options</a></li> <li><a href="methods.html" data-role="button">Methods</a></li> <li><a href="events.html" data-role="button">Events</a></li> </ul>
  22. PRO TIP Low Retina (HD) dimension 18x18 36x36 Your icon

    should be pure white, with dimensions of 18x18 pixels. Save the icon as a PNG-8 image with a transparent background. DIY Best Results
  23. Don’t forget the little guys @media  only  screen  and  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:

     1.5),              only  screen  and  (min-­‐-­‐moz-­‐device-­‐pixel-­‐ratio:  1.5),              only  screen  and  (min-­‐resolution:  240dpi)  {    .ui-­‐icon-­‐myapp-­‐phone  {        background-­‐image:  url(/myapp/icons/phone-­‐hd.png); } } Normal Retina
  24. Reverse Transition <a href=”#home” data-rel="back">Get Me Outta Here!</a> • Mimics

    the back button rather than adding page to history • Optionally supply href value to support “C grade” browsers • Back button defaults to the reverse transition that was used to get there
  25. Reverse Transition <a href=”#home” data-rel="back">Get Me Outta Here!</a> • Mimics

    the back button rather than adding page to history • Optionally supply href value to support “C grade” browsers • Back button defaults to the reverse transition that was used to get there
  26. Reverse Transition <a href=”#home” data-rel="back">Get Me Outta Here!</a> • Mimics

    the back button rather than adding page to history • Optionally supply href value to support “C grade” browsers • Back button defaults to the reverse transition that was used to get there
  27. Clean URL’s • Loads page using the old deep-linking history

    mechanism • Calls history.replaceState() to make the url cleaner to read (if supported)
  28. Support for HTML 5 Input Types type type email tel

    url number time date month week datetime color <input type="type" name="time" id="time" value="" />
  29. Support for HTML 5 Input Types type type email tel

    url number time date month week datetime color <input type="type" name="time" id="time" value="" />
  30. Support for HTML 5 Input Types type type email tel

    url number time date month week datetime color <input type="type" name="time" id="time" value="" />
  31. Support for HTML 5 Input Types type type email tel

    url number time date month week datetime color <input type="type" name="time" id="time" value="" />
  32. Orientation Change $(function() { $(window).orientationchange( function( e ) { alert(

    "You rotated your device to " + e.orientation + "orientation" ); }); }); /* Portrait */ @media screen and (orientation:portrait) { /* Portrait styles */ } /* Landscape */ @media screen and (orientation:landscape) { /* Landscape styles */ }
  33. <ul data-role="listview"> <li><a href="#">The Godfather</a></li> <li><a href="#">Inception</a></li> <li><a href="#">Pulp Fiction</a></li>

    <li><a href="#">Schindler's List</a></li> <li><a href="#">12 Angry Men</a></li> <li><a href="#">Star Wars: Episode V</a></li> <li><a href="#">The Dark Knight</a></li> <li><a href="#">The Lord of the Rings</a></li> </ul> List View
  34. <ol data-role="listview"> <li><a href="#">The Godfather</a></li> <li><a href="#">Inception</a></li> <li>Pulp Fiction (sold

    out)</li> <li><a href="#">Schindler's List</a></li> <li><a href="#">12 Angry Men</a></li> <li><a href="#">Star Wars: Episode V</a></li> <li><a href="#">The Dark Knight</a></li> <li><a href="#">The Lord of the Rings</a></li> </ol> Ordered List View
  35. <ul data-role="listview" data-filter="true"> <li><a href="#">United States</a></li> <li><a href="#">Great Britain</a></li> <li><a

    href="#">Germany</a></li> <li><a href="#">France</a></li> </ul> Filtered List View Full text search is the default algorithm
  36. <ul data-role="listview" data-inset="true"> <li data-role="divider">Monday, November 14</li> <li><a href="#"> <h4>To

    Do Item 1</h4> <p style="font-weight:bold">To do item 1 summary</p> <p class="ui-li-aside">Due at 12pm</p> <p>This is the detail text for ToDo Item 1</p> </a></li> <li><a href="#"> <h4>To Do Item 2</h4> <p style="font-weight:bold">To do item 2 summary</p> <p class="ui-li-aside">Due at 2pm</p> <p>This is the detail text for ToDo Item 2</p> </a></li> <!-- etc etc --> </ul>
  37. <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="menu.html" data-icon="grid" class="ui-btn-active">Menu</a></li>

    <li><a href="favorites" data-icon="star">Favorites</a></li> <li><a href="foo.html" data-icon="gear">Settings</a></li> </ul> </div> </div>
  38. <div data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="left"> <ul> <li><a href="menu.html" data-icon="grid">Menu</a></li>

    <li><a href="favorites" data-icon="star">Favorites</a></li> <li><a href="foo.html" data-icon="gear">Settings</a></li> </ul> </div> </div>
  39. True Fixed Toolbars <script src="jquery.js"></script> <script type="text/javascript"> $(document).bind("mobileinit", function() {

    $.extend( $.mobile, { // depreciated in ver 1.1 touchOverflowEnabled: true }); }); </script> <script src="jquery-mobile.js"></script> works on iOS 5 / Android 2.2+ with zoom disabled. Gets depreciated in 1.1 in exchange for more elegant solution.
  40. a)Highest priority elements, such as headers and footers. b)Less important

    elements than swatch ‘a’, such as dividers in list views and headers in nested lists. Swatches
  41. a)Highest priority elements, such as headers and footers. b)Less important

    elements than swatch ‘a’, such as dividers in list views and headers in nested lists. c)Elements with a “normal” level of importance. This covers many elements including the page body, buttons, standard list items, and so on. Swatches
  42. a)Highest priority elements, such as headers and footers. b)Less important

    elements than swatch ‘a’, such as dividers in list views and headers in nested lists. c)Elements with a “normal” level of importance. This covers many elements including the page body, buttons, standard list items, and so on. d)An alternative to the ‘b’ swatch, again to indicate a secondary level of importance to the ‘a’ swatch. Swatches
  43. a)Highest priority elements, such as headers and footers. b)Less important

    elements than swatch ‘a’, such as dividers in list views and headers in nested lists. c)Elements with a “normal” level of importance. This covers many elements including the page body, buttons, standard list items, and so on. d)An alternative to the ‘b’ swatch, again to indicate a secondary level of importance to the ‘a’ swatch. e)An accent swatch, for times when you want to make an element stand out in the page. jQuery Mobile doesn’t use this swatch by default, so it’s up to you to apply it in situations where you want to use it Swatches
  44. • Should contain style rules for at least the five

    swatches ‘a’ through ‘e’. Themes
  45. • Should contain style rules for at least the five

    swatches ‘a’ through ‘e’. • Can contain up to 26 swatches (a-z) Themes
  46. • Should contain style rules for at least the five

    swatches ‘a’ through ‘e’. • Can contain up to 26 swatches (a-z) • Has several global settings, including fonts, drop shadows, and corner radius values for buttons and boxes Themes
  47. • Should contain style rules for at least the five

    swatches ‘a’ through ‘e’. • Can contain up to 26 swatches (a-z) • Has several global settings, including fonts, drop shadows, and corner radius values for buttons and boxes • Are optional (more on this later) Themes
  48. Disable Themes <select name="foo" id="foo" data-role="none"> <option value="a" >A</option> <option

    value="b" >B</option> <option value="c" >C</option> </select> $(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar"; });
  49. jquery.mobile.structure.css everything you need except the theme (colors, fonts, etc.)

    css/ ├──  structure │      ├──  index.php │      ├──  jquery.mobile.button.css │      ├──  jquery.mobile.collapsible.css │      ├──  jquery.mobile.controlgroup.css │      ├──  jquery.mobile.core.css │      ├──  jquery.mobile.dialog.css │      ├──  jquery.mobile.forms.checkboxradio.css │      ├──  jquery.mobile.forms.fieldcontain.css │      ├──  jquery.mobile.forms.select.css │      ├──  jquery.mobile.forms.slider.css │      ├──  jquery.mobile.forms.textinput.css │      ├──  jquery.mobile.grids.css │      ├──  jquery.mobile.headerfooter.css │      ├──  jquery.mobile.listview.css │      ├──  jquery.mobile.navbar.css │      └──  jquery.mobile.transitions.css └──  themes        └──  default                ├──  images                │      ├──  ajax-­‐loader.png                │      ├──  icons-­‐18-­‐black.png                │      ├──  icons-­‐18-­‐white.png                │      ├──  icons-­‐36-­‐black.png                │      └──  icons-­‐36-­‐white.png                ├──  index.php                └──  jquery.mobile.theme.css
  50. jquery.mobile.structure.css everything you need except the theme (colors, fonts, etc.)

    css/ ├──  structure │      ├──  index.php │      ├──  jquery.mobile.button.css │      ├──  jquery.mobile.collapsible.css │      ├──  jquery.mobile.controlgroup.css │      ├──  jquery.mobile.core.css │      ├──  jquery.mobile.dialog.css │      ├──  jquery.mobile.forms.checkboxradio.css │      ├──  jquery.mobile.forms.fieldcontain.css │      ├──  jquery.mobile.forms.select.css │      ├──  jquery.mobile.forms.slider.css │      ├──  jquery.mobile.forms.textinput.css │      ├──  jquery.mobile.grids.css │      ├──  jquery.mobile.headerfooter.css │      ├──  jquery.mobile.listview.css │      ├──  jquery.mobile.navbar.css │      └──  jquery.mobile.transitions.css └──  themes        └──  default                ├──  images                │      ├──  ajax-­‐loader.png                │      ├──  icons-­‐18-­‐black.png                │      ├──  icons-­‐18-­‐white.png                │      ├──  icons-­‐36-­‐black.png                │      └──  icons-­‐36-­‐white.png                ├──  index.php                └──  jquery.mobile.theme.css code.jquery.com/mobile/1.0/ jquery.mobile.structure-1.0.min.css { I'm on the CDN!
  51. Enable Cache • Multi-page documents are cached • Anything loaded

    via ajax is removed on pagehide() • Expires and Cache-Control HTTP headers <div data-role="page" id="cacheMe" data-dom-cache="true">...</div>
  52. Prefetching <a  href="prefetchMe.html"  data-­‐prefetch>  ...  </a> On page load jQuery

    Mobile prefetches links with this attribute making it instantly available when clicked.
  53. $.mobile.loadPage( "about/us.html" ); //cue the page loader $.mobile.showPageLoadingMsg(); $(document).bind("mobileinit", function(){

    $.extend( $.mobile , { foo: bar }); }); Setting global options Load an external page, enhance its content, and insert it into the DOM Some useful methods
  54. • (v1.1) Mid/Late February • Download Builder Tool • Fixed

    toolbar improvements • Smoother transitions • (v1.2) Late Spring: • New components & refinements • Fetch content without page transitions, think pull to refresh or image galleries