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

BlackBerry Jam Europe - JAM 329 - In-depth look at jQuery Mobile

BlackBerry Jam Europe - JAM 329 - In-depth look at jQuery Mobile

Ralph Whitbeck

February 06, 2013
Tweet

More Decks by Ralph Whitbeck

Other Decks in Technology

Transcript

  1. In-depth look at jQuery Mobile JAM329 Ralph Whitbeck – appendTo

    - @RedWolves Jason Scott – BlackBerry - @JsonScott 5 – 6 February, 2013
  2.   jQuery Board Member   jQuery Mobile Team - Developer

    Relations   Modern Web Advocate at appendTo   Project Lead for the jQuery Mobile Cookbook http://jquerymobilecookbook.com Ralph Whitbeck 3
  3. Getting Started 6 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,

    initial-scale=1"> <link href="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></ script> <script src="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.js"></script> </head> <body> </body> </html>
  4. Anatomy of a page 7 <div data-role="page"> <div data-role="header"> <h1>My

    Title</h1> </div> <div data-role="content"> <p>Hello world</p> </div> <div data-role="footer"> <p>Footer</p> </div> </div>
  5. Multiple pages in one file 8 <div id="page-1" data-role="page"> <div

    data-role="header"><h1>Page 1</h1></div> <div data-role="content"> <a href="#page-2" data-role="button">Next Page</a> </div> </div> <div id="page-2" data-role="page"> <div data-role="header"><h1>Page 2</h1></div> <div data-role="content"> <a href="#page-1" data-role="button">Previous Page</a> </div> </div>
  6. Adding Components 9 <div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html"

    data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>
  7. Adding Components 10 <div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html"

    data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>
  8. jQuery Mobile & Backbone.js Tips   Disable jQuery Mobile’s Page

    Navigation features, let backbone.js handle routing   When jQuery Mobile isn’t handling page navigation you’ll need to manually remove pages from the DOM 13
  9. jQuery Mobile & Backbone.js 14 $(document).bind("mobileinit", function () { //

    Disable jQuery Mobile page navigation $.mobile.ajaxEnabled = false; $.mobile.linkBindingEnabled = false; $.mobile.hashListeningEnabled = false; $.mobile.pushStateEnabled = false; });
  10. jQuery Mobile & Backbone.js 15 // Remove page from DOM

    when it's being replaced $(document).on('pagehide', 'div[data-role="page"]’, function (event, ui) { $(event.currentTarget).remove(); });
  11. Release Milestones   November 16, 2011 – 1.0.0   January

    26, 2012 – 1.0.1   April 13, 2012 – 1.1.0   July 12, 2012 – 1.1.1   October 2, 2012 – 1.2.0   January 14, 2013 – 1.3.0 Beta 18
  12. jQuery Mobile 1.2.0   New: Popup Widget   New Auto

    dividers in Listview mode   Collapsible Listviews are now supported   A Download builder (Alpha) 23
  13. Popup Menu 25 <a href="#menu" data-rel="popup" data-role="button">Menu</a> <div data-role="popup" id="menu"

    data-theme="a"> <ul data-role="listview" data-theme="c" data-inset="true"> <li data-role="divider" data-theme="a">My Menu</li> <li>Unlinked</li> <li><a href="methods.html">Linked</a></li> <li> <a href="methods.html">With count <span class="ui-li-count">42</span> </a> </li> </ul> </div>
  14. Popup Positioning 29   By Default: Popups Center over object

    that triggered it   Add attribute data-position-to="window"   This centers the popup in the center of the window
  15. Popup Overlays 30   Overlay: Background of the popup but

    overlays the page   Theme the overlay to a dark shade. With the default swatches we can use the a swatch   Set the overlay theme with data- attribute: data-overlay- theme   data-overlay-theme="a"
  16. Overview   Uses CSS3 Properties   Multiple Color “Swatches”  

    Sprited Icon Set   Default Theme come with 5 swatches a-e   If no swatch is specified by default:   a swatch for headers/footers   c swatch for content 34
  17. Mixing Swatches 35 <ul data-role="listview" data-theme="a"> <li><a href="#">Theme Inherit</a></li> <li

    data-theme="b"><a href="#">Theme b</a></li> <li data-theme="c"><a href="#">Theme c</a></li> <li data-theme="d"><a href="#">Theme d</a></li> <li data-theme="e"><a href="#">Theme e</a></li> </ul>
  18. Third-Party Themes   iOS Theme   http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/   Windows Phone

    7.5 Metro Theme   http://sgrebnov.github.com/jqmobile-metro-theme/samples/jqm- public-demo/index.html 38
  19. Add the <script> tags ... 42 <!DocType HTML> <html> <head>

    .... <link rel="stylesheet" href=”BlackBerry-JQM-all.min.css" /> <script src=”BlackBerry-JQM-all.min.js"></script> </head> .... </html>
  20. Where Did the Meta Tag Go?   jQuery Mobile normally

    recommends this <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/ mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/ jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.js"></script> </head> 43
  21. Meta Tag Substitution <head> <script> var meta = document.createElement("meta"); meta.setAttribute('name','viewport');

    meta.setAttribute('content','initial-scale='+ (1/ window.devicePixelRatio) + ',user- scalable=no'); document.getElementsByTagName('head') [0].appendChild(meta); </script> </head> View http://bit.ly/R5zC20 for more info 44
  22. jQuery Mobile & BlackBerry 10   Supports all of the

    jQuery Mobile Controls   New widgets   Action bar   Overflow Menus (Panels)   Gridview   Progress bars   Input validator   Drop down Menu   New Transition   Cover 45
  23. Action Bars 47   Buttons and Tabs   Provides up

    to 5 slots for commonly used actions   Built in “Back” button (if no tabs)
  24. Overflow Menu (Panels) 48   Action Overflow Menu   More

    actions button   Add secondary actions   Tab Overflow Menu   Space for additional Tabs
  25. Grid Lists 49   Provides layout of image data  

    Declare your items in groups and rows   Optional headers for groups   1:1 or 16:9 image formats   Sizes images based on number of items per row   Optional title overlays
  26. Progress Indicators 50   Show progress of a running action

      Set the min, max and value   Normal and Paused states   Simply add an HTML5 progress element to your screen
  27.   Provide the user with immediate form validation   Uses

    the standard HTML5 form validation Input Validation 51
  28. Panel 57 <div data-role="page"> <div data-role="panel" id="mypanel"> <!-- panel content

    goes here --> </div><!-- /panel --> <!-- header --> <!-- content --> <!-- footer --> </div><!-- page -->
  29. Range Slider 60 <div data-role="rangeslider"> <label for="range-1a">Rangeslider:</label> <input name="range-1a" id="range-1a"

    min="0" max="100" value="0" type="range" /> <label for="range-1b">Rangeslider:</label> <input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range" /> </div>
  30. THANK YOU JAM329 Ralph Whitbeck – appendTo - @RedWolves Jason

    Scott – BlackBerry - @JsonScott 5 – 6 February, 2013