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

In Depth Look at jQuery Mobile

Ralph Whitbeck
November 12, 2012

In Depth Look at jQuery Mobile

Presentation slides given at jQuery Asia in Seoul, South Korea on November 12, 2012

Ralph Whitbeck

November 12, 2012
Tweet

More Decks by Ralph Whitbeck

Other Decks in Technology

Transcript

  1. RALPH WHITBECK jQuery ইदই RALPH WHITBECK jQuery Board Member jQuery

    Mobile Developer Relation Team Member Director of Professional Services Project Lead for jQuery Mobile Cookbook http://jquerymobilecookbook.com
  2. RALPH WHITBECK jQuery ইदই GETTING STARTED <!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>
  3. RALPH WHITBECK jQuery ইदই ANATOMY OF A PAGE <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>
  4. RALPH WHITBECK jQuery ইदই MULTIPLE PAGES IN ONE FILE <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>
  5. RALPH WHITBECK jQuery ইदই ADDING COMPONENTS <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>
  6. RALPH WHITBECK jQuery ইदই ADDING COMPONENTS <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. RALPH WHITBECK jQuery ইदই 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
  8. RALPH WHITBECK jQuery ইदই JQUERY MOBILE 1.2.0 • New: Popup

    Widget • New Auto dividers in Listview mode • Collapsable Listviews are now supported • A Download builder (Alpha)
  9. RALPH WHITBECK jQuery ইदই ADDING A POPUP <a  href="#simplepopup"  data-­‐rel="popup">Open

     Popup</a> <div  data-­‐role="popup"  id="simplepopup">    <p>This  is  a  completely  basic  popup,  no  options  set.</p> </div>
  10. RALPH WHITBECK jQuery ইदই POPUP MENUS <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>
  11. RALPH WHITBECK jQuery ইदই POSITIONING • 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
  12. RALPH WHITBECK jQuery ইदই OVERLAY STLYING • 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"
  13. RALPH WHITBECK jQuery ইदই ROADMAP • jQuery Mobile 1.3 •

    Responsive Table • jQuery UI Convergence • New API/Demo Docs • Expected (end of year) • jQuery Mobile 1.4 • Scrolling Region Utility • New Tab Widget (Based on jQuery UI) • Expected (March/April 2013)
  14. RALPH WHITBECK jQuery ইदই THEMING 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
  15. RALPH WHITBECK jQuery ইदই MIXING SWATCHES <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>
  16. RALPH WHITBECK jQuery ইदই THIRD PARTY THEMES • jQuery Mobile

    Blackberry 10 Theme • https://github.com/blackberry/jQueryMobile-BB10-Theme • 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
  17. RALPH WHITBECK jQuery ইदই ADDING A PLUGIN IS EASY <link

     href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-­‐1.2.0.css"   rel="stylesheet"  type="text/css"> <link  href="/css/plugin.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> <script  src="/js/plugin.js"></script>  
  18. RALPH WHITBECK jQuery ইदই ADDING A PLUGIN IS EASY <link

     href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-­‐1.2.0.css"   rel="stylesheet"  type="text/css"> <link  href="/css/plugin.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> <script  src="/js/plugin.js"></script>  
  19. RALPH WHITBECK jQuery ইदই WIDGET FACTORY • All internal widget

    use jQuery UI Widget Factory • Provides a template for code organization • Exposes all options as data attributes for consistency through library • More info: http://api.jqueryui.com/jQuery.widget/
  20. RALPH WHITBECK jQuery ইदই AUTO INITIALIZATION • Users should add

    CSS/JS and markup to page and “it just work” • To Auto Initialize: • Bind to pagecreate and create events • Call plugin on markup that matches markup convention • register the initSelector option with the data-role attribute to match against
  21. RALPH WHITBECK jQuery ইदই AUTO INITIALIZATION //set  the  initSelection  Option

    options:  {   initSelector:  ":jqmData(role='newplugin')" }, //  Bind  to  pagecreate  and  create  events //  Using  internal  “listview”  as  our  example $(  document  ).bind(  "pagecreate  create",  function(  e  )  {   $.mobile.listview.prototype.enhanceWithin(  e.target  ); });
  22. RALPH WHITBECK jQuery ইदই NAMESPACING • Plugin should work with

    namespaced attributes • Global namespace override that sets a namespace • test that plugin works with both data- attributes and data- namespace- attributes
  23. RALPH WHITBECK jQuery ইदই NAMESPACING //  To  set  a  namespace

    $(document).bind("mobileinit",  function(){    $.mobile.ns  =  "mynamespace"; }); //  this  changes  thing  like //  data-­‐role  now  becomes  data-­‐mynamespace-­‐role
  24. RALPH WHITBECK jQuery ইदই THEME FRAMEWORK • Use internal plugins

    as a guide on: • structural styles that don’t set background colors, font colors, etc. • This allows the theme to flow through • Apply the stackable theme framework classes to your plugin • More info here http://jquerymobile.com/test/docs/api/themes.html • If swatch data- attribute is not set have widget inherit from the parent
  25. RALPH WHITBECK jQuery ইदই SEMANTICS • Use HTML5 and better

    semantics • This makes it easier for selecting and parsing • In some cases it’ll make it easier to replace existing markup with widget markup for degraded experiences
  26. RALPH WHITBECK jQuery ইदই ACCESSIBILITY • Ensure widget incorporates accessibility

    features like ARIA attributes • Test on screen readers like VoiceOver on iOS
  27. RALPH WHITBECK jQuery ইदই UNIT TESTS • Have solid test

    coverage • jQuery Mobile uses QUnit for their Test Suite • See jQuery Mobile’s tests for examples https://github.com/jquery/ jquery-mobile/tree/master/tests/unit
  28. RALPH WHITBECK jQuery ইदই SOME 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 • Complete Sample App https://github.com/ccoenraets/backbone- jquerymobile
  29. RALPH WHITBECK jQuery ইदই PREPPING JQUERY MOBILE $(document).bind("mobileinit",  function  ()

     {        //  Disable  jQuery  Mobile  page  navigation        $.mobile.ajaxEnabled  =  false;        $.mobile.linkBindingEnabled  =  false;        $.mobile.hashListeningEnabled  =  false;        $.mobile.pushStateEnabled  =  false;        //  Remove  page  from  DOM  when  it's  being  replaced        $(document).on('pagehide',  'div[data-­‐role="page"]',        function  (event,  ui)  {                $(event.currentTarget).remove();        }); });
  30. RALPH WHITBECK jQuery ইदই BUILD NATIVE APPS • Andriod •

    Blackberry • iOS • Symbian • WebOS • Windows Phone • Windows 8 • Bada • Tizen
  31. RALPH WHITBECK jQuery ইदই CROSS DOMAIN ISSUES • Document root

    loads from file:// so loading assets from remote server is considered a cross-domain request • This can be a blocker in certain scenarios • Can set the jQuery Boolean variable $.support.cors to true • Additionally you may need to set the $.mobile.allowCrossDomainPages = true; in the mobileinit event • Look into PhoneGaps Whitelist feature to provide a list of URL’s allowed • Doesn’t work on all devices so look to PhoneGaps documentation
  32. RALPH WHITBECK jQuery ইदই SOME TIPS • Use local copies

    of jQuery Mobile with Cordova • Recommended that you disable PushState feature on installed apps • Avoid using underscores (_) in files and folders
  33. RALPH WHITBECK jQuery ইदই THANK YOU • Reach me at

    [email protected] • Twitter at @RedWolves • Special Thanks to Andy Matthews for his permission for code/screenshots from his tutorial on Nettuts