Your SlideShare is downloading. ×
0
Rapidly Develop Mobile Web                    Applications with @mikehostetlerWednesday, October 19, 11
Who am I? @mikehostetlerWednesday, October 19, 11
@mikehostetlerWednesday, October 19, 11
@mikehostetlerWednesday, October 19, 11
@mikehostetlerWednesday, October 19, 11
http://learn.appendto.com @mikehostetlerWednesday, October 19, 11
@mikehostetlerWednesday, October 19, 11
Many More ... @mikehostetlerWednesday, October 19, 11
The Mobile Frontier ... @mikehostetlerWednesday, October 19, 11
6.9 Billion People @mikehostetlerWednesday, October 19, 11
Mobile is available to 90% @mikehostetlerWednesday, October 19, 11
5.3 Billion+ Active                               Subscriptions     http://www.itu.int/ITU-D/ict/material/FactsFigures2010...
7% of US Traffic comes             from SmartPhones and                    Tablets    http://www.comscore.com/Press_Events/...
10+ billion                             by 2013 @mikehostetlerWednesday, October 19, 11
@mikehostetlerWednesday, October 19, 11
Know Better ... Do Better                            ? @mikehostetlerWednesday, October 19, 11
The is the web        People expect it to work everywhere @mikehostetlerWednesday, October 19, 11
The Solution? @mikehostetlerWednesday, October 19, 11
@mikehostetlerWednesday, October 19, 11
jQuery Philosophy ... @mikehostetlerWednesday, October 19, 11
Unified System                            Universal Access                            Easy Development @mikehostetlerWednes...
One Codebase - Multiple Platforms @mikehostetlerWednesday, October 19, 11
Desktop Too! @mikehostetlerWednesday, October 19, 11
In <3 with Web Standards @mikehostetlerWednesday, October 19, 11
Built on jQuery Core ... @mikehostetlerWednesday, October 19, 11
Familiar API Style             It’s just jQuery!            $( document ).delegate( ".city", "click", function ( e ) {    ...
Small Filesize @mikehostetlerWednesday, October 19, 11
Mobile Browser Grades                            C   Basic HTML                            B   Enhanced experience without...
Graded                 Browser                 Support @mikehostetlerWednesday, October 19, 11
Doesn’t Break the Web @mikehostetlerWednesday, October 19, 11
Unified Experience @mikehostetlerWednesday, October 19, 11
Accessible @mikehostetlerWednesday, October 19, 11
Normalizes Input Paradigms @mikehostetlerWednesday, October 19, 11
Compiles to Native                            +                                       = @mikehostetlerWednesday, October 1...
The Con’s ... @mikehostetlerWednesday, October 19, 11
Perceived Performance @mikehostetlerWednesday, October 19, 11
Native Look & Feel                                   vs. @mikehostetlerWednesday, October 19, 11
Device API’s @mikehostetlerWednesday, October 19, 11
Offline Access                            (           ) @mikehostetlerWednesday, October 19, 11
These are hard problems ... @mikehostetlerWednesday, October 19, 11
Choose the right tool ... @mikehostetlerWednesday, October 19, 11
Current Project Status @mikehostetlerWednesday, October 19, 11
Just released jQuery Mobile RC1 @mikehostetlerWednesday, October 19, 11
@mikehostetlerWednesday, October 19, 11
@mikehostetlerWednesday, October 19, 11
@mikehostetlerWednesday, October 19, 11
More at http://jqmgallery.com @mikehostetlerWednesday, October 19, 11
Standard in Adobe CS5.5 @mikehostetlerWednesday, October 19, 11
Shipping in Visual Studio Soon ... @mikehostetlerWednesday, October 19, 11
Lets dive in ... @mikehostetlerWednesday, October 19, 11
Download the code                   http://jquerymobile.com/download   https://github.com/jquery/jquery-mobile            ...
Pages @mikehostetlerWednesday, October 19, 11
Your First Page!      <!DocType HTML>      <html>        <head>          <meta charset=”utf-8”>          <title>My first jQ...
Add the <script> tags ...      <!DocType HTML>      <html>        <head>          ....          <link rel="stylesheet" hre...
Add the <script> tags ...      <!DocType HTML>      <html>        <head>          ....          <link rel="stylesheet" hre...
Add the <script> tags ...      <!DocType HTML>      <html>        <head>          ....          <link rel="stylesheet" hre...
Building your Page      <body>           <div data-role=”page”>                <p>Hello World!</p>           </div>      <...
The role of data attributes ...      <body>           <div data-role=”page”>                <p>Hello World!</p>           ...
Full Sample Page      <body>        <div data-role=”page”>                <div data-role=”header”> ... </div>             ...
Lists @mikehostetlerWednesday, October 19, 11
Basic List      <div data-role=”content”>           <h2>Hello World!</h2>           <ul>             <li>jQuery</li>      ...
Add the List View Role      <div data-role=”content”>           <h2>Hello World!</h2>           <ul data-role="listview"> ...
Inset Style      <div data-role=”content”>           <h2>Hello World!</h2>           <ul data-role="listview"             ...
Add Links           <ul data-role="listview"                 data-inset="true">             <li>                 <a href=”...
More Examples ... @mikehostetlerWednesday, October 19, 11
Ordered Lists      <div data-role=”content”>           <h2>Hello World!</h2>           <ol data-role="listview">          ...
Nested Lists = Drillable Pages @mikehostetlerWednesday, October 19, 11
Count Bubbles      <ul data-role="listview">           <li><a href=”http://jquery.com”>               jQuery             <...
List Dividers      <ul data-role="listview">           <li data-role="list-divider">Core</li>           <li>jQuery</li>   ...
Filter Bar      <div data-role=”content”>           <h2>Hello World!</h2>           <ul data-role="listview"             d...
Adding List Items @mikehostetlerWednesday, October 19, 11
Append, then Refresh!      $(‘ul#jquery’).           .append(                ‘<li><a href=”http://sizzlejs.com”>Sizzle JS<...
Theming @mikehostetlerWednesday, October 19, 11
Basic Theming      <div data-role=”page” data-theme=”a”>           <div data-role=”content”>             ....           </...
Side by Side @mikehostetlerWednesday, October 19, 11
ThemeRoller @mikehostetlerWednesday, October 19, 11
Links & Navigation @mikehostetlerWednesday, October 19, 11
External Links           <ul data-role="listview"                 data-inset="true" data-theme=”e”>             <li>      ...
Internal + Hijax + DOM Injection           <ul data-role="listview"                 data-inset="true" data-theme=”e”>   Cl...
Internal + Hijax + DOM Injection                            /index.html   /jquery.html @mikehostetlerWednesday, October 19...
Internal + Hijax + DOM Injection                            /index.html   /jquery.html @mikehostetlerWednesday, October 19...
Internal + Hijax + DOM Injection            /index.html     /jquery.html @mikehostetlerWednesday, October 19, 11
Transitions @mikehostetlerWednesday, October 19, 11
External Links           <ul data-role="listview"                 data-inset="true" data-theme=”e”>             <li>      ...
Multi-Page & Pre-Fetch @mikehostetlerWednesday, October 19, 11
Multiple Pages, One DOM      <body>           <div data-role=”page” id=”page1”>             <p>Hello World!</p>           ...
Pre-Fetching      <body>           <div data-role=”page” id=”page1”>             <p>Hello World!</p>             <a href="...
Forms @mikehostetlerWednesday, October 19, 11
Basic Form with Labels      <div data-role="content">           <form action="#" method="get">           <label for="examp...
Containers      <div data-role="content">        <form action="#" method="get">           <div data-role="fieldcontain">   ...
Optimized for Width Changes @mikehostetlerWednesday, October 19, 11
Progressive Enhancement @mikehostetlerWednesday, October 19, 11
Text Input      <div data-role="content">        <form action="#" method="get">           <div data-role="fieldcontain">   ...
Text Input Helpers           ”password”             ”email”        ”tel” @mikehostetlerWednesday, October 19, 11
Text Area’s Grow @mikehostetlerWednesday, October 19, 11
Flip Switch      <form action="#" method="get">        <div data-role="fieldcontain">         <label for="slide">Flip switc...
Radio Buttons      <form action="#" method="get">        <div data-role="fieldcontain">          <input type="radio" name="...
Checkboxes Too      <form action="#" method="get">        <div data-role="fieldcontain">          <input type="checkbox"   ...
Horizontal Set      <form action="#" method="get">        <div data-role="fieldcontain"            data-type=”horizontal”> ...
Select Lists      <form action="#" method="get">        <div data-role="fieldcontain">         <label for="choice-1">      ...
Select Lists      <form action="#" method="get">        <div data-role="fieldcontain">         <label for="choice-1">      ...
Select Lists - Non-Native      <form action="#" method="get">        <div data-role="fieldcontain">         <label for="cho...
Extra’s @mikehostetlerWednesday, October 19, 11
Dialog’s      <div data-role="content">           <a href="foo.html"             data-rel="dialog">Open dialog</a>      </...
Button’s      <div data-role="content">          <a href="#" data-role="button">            Link Button</a>           <a h...
Toolbar’s      <div data-role="page">       <div data-role="header"          data-position="inline">      	 <a href="index...
Navbar’s      <div data-role="page">        ....        <div data-role="footer">      	 <div data-role="navbar">      	 	 ...
Fixed Positioning      <div data-role="page">        <div data-role="header"         data-position="fixed">      	   <h1>Fi...
Persistent Footer Bar      <div data-role="footer">        <div data-role="navbar"          class="ui-state-persist">     ...
Events @mikehostetlerWednesday, October 19, 11
New Events   ‣ tap, taphold   ‣ swipe, swipeleft, swiperight   ‣ scrollstart, scrollstop   ‣ orientationchange   ‣ Page Lo...
Virtual Mouse Events   ‣ vmouseover   ‣ vmousedown   ‣ vmousemove   ‣ vmouseup   ‣ vmouseclick - WARNING!   ‣ vmousecancel...
API Methods @mikehostetlerWednesday, October 19, 11
Changing Pages      // Mimic’s a ‘tap’ or ‘click’      $.mobile.changePage(          ‘about/us.html’ OR $(‘#about’),      ...
Loading Message      $.mobile.showLoadingMessage()      $.mobile.hideLoadingMessage() @mikehostetlerWednesday, October 19,...
The Data Question ... @mikehostetlerWednesday, October 19, 11
Those data- attributes ...      Don’t use:      $.data      Use:      jqmData()       and      jqmRemoveData() @mikehostet...
URL’s & Paths @mikehostetlerWednesday, October 19, 11
URL’s & Paths      $.mobile.path      URL: http://jblas:password@mycompany.com:8080/mail/inbox?      msg=1234&type=unread#...
Thanks to the Filament Group!                            http://filamentgroup.com @mikehostetlerWednesday, October 19, 11
Thanks to the                            jQuery Mobile Team! @mikehostetlerWednesday, October 19, 11
Thanks to the Sponsors! @mikehostetlerWednesday, October 19, 11
Thank You!                                     @mikehostetler                                http://mike-hostetler.com    ...
Upcoming SlideShare
Loading in...5
×

Rapidly Develop Mobile Web Applications with jQuery Mobile

3,482

Published on

This case study focuses on how to effectively use jQuery Mobile to develop robust, cross-platform, mobile web applications. We’ll present an overview of jQuery Mobile, outlining the goals and aims of the project and the pros and cons. You’ll learn the capabilities of jQuery Mobile, walk through the API and review current, sample applications. You’ll also look at an app appendTo has built that demonstrates how easy and efficient it is to build an application with jQuery Mobile.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,482
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
91
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Rapidly Develop Mobile Web Applications with jQuery Mobile"

  1. 1. Rapidly Develop Mobile Web Applications with @mikehostetlerWednesday, October 19, 11
  2. 2. Who am I? @mikehostetlerWednesday, October 19, 11
  3. 3. @mikehostetlerWednesday, October 19, 11
  4. 4. @mikehostetlerWednesday, October 19, 11
  5. 5. @mikehostetlerWednesday, October 19, 11
  6. 6. http://learn.appendto.com @mikehostetlerWednesday, October 19, 11
  7. 7. @mikehostetlerWednesday, October 19, 11
  8. 8. Many More ... @mikehostetlerWednesday, October 19, 11
  9. 9. The Mobile Frontier ... @mikehostetlerWednesday, October 19, 11
  10. 10. 6.9 Billion People @mikehostetlerWednesday, October 19, 11
  11. 11. Mobile is available to 90% @mikehostetlerWednesday, October 19, 11
  12. 12. 5.3 Billion+ Active Subscriptions http://www.itu.int/ITU-D/ict/material/FactsFigures2010.pdf @mikehostetlerWednesday, October 19, 11
  13. 13. 7% of US Traffic comes from SmartPhones and Tablets http://www.comscore.com/Press_Events/Press_Releases/2011/10/ Smartphones_and_Tablets_Drive_Nearly_7_Percent_of_Total_U.S._Digital_Traffic @mikehostetlerWednesday, October 19, 11
  14. 14. 10+ billion by 2013 @mikehostetlerWednesday, October 19, 11
  15. 15. @mikehostetlerWednesday, October 19, 11
  16. 16. Know Better ... Do Better ? @mikehostetlerWednesday, October 19, 11
  17. 17. The is the web People expect it to work everywhere @mikehostetlerWednesday, October 19, 11
  18. 18. The Solution? @mikehostetlerWednesday, October 19, 11
  19. 19. @mikehostetlerWednesday, October 19, 11
  20. 20. jQuery Philosophy ... @mikehostetlerWednesday, October 19, 11
  21. 21. Unified System Universal Access Easy Development @mikehostetlerWednesday, October 19, 11
  22. 22. One Codebase - Multiple Platforms @mikehostetlerWednesday, October 19, 11
  23. 23. Desktop Too! @mikehostetlerWednesday, October 19, 11
  24. 24. In <3 with Web Standards @mikehostetlerWednesday, October 19, 11
  25. 25. Built on jQuery Core ... @mikehostetlerWednesday, October 19, 11
  26. 26. Familiar API Style It’s just jQuery! $( document ).delegate( ".city", "click", function ( e ) { $( "#dialog" ).one( "pagehide", function () { $.mobile.changePage( cities.php ); }).dialog( "close" ); }); @mikehostetlerWednesday, October 19, 11
  27. 27. Small Filesize @mikehostetlerWednesday, October 19, 11
  28. 28. Mobile Browser Grades C Basic HTML B Enhanced experience without Ajax Full experience with Ajax-based A animated page transitions. @mikehostetlerWednesday, October 19, 11
  29. 29. Graded Browser Support @mikehostetlerWednesday, October 19, 11
  30. 30. Doesn’t Break the Web @mikehostetlerWednesday, October 19, 11
  31. 31. Unified Experience @mikehostetlerWednesday, October 19, 11
  32. 32. Accessible @mikehostetlerWednesday, October 19, 11
  33. 33. Normalizes Input Paradigms @mikehostetlerWednesday, October 19, 11
  34. 34. Compiles to Native + = @mikehostetlerWednesday, October 19, 11
  35. 35. The Con’s ... @mikehostetlerWednesday, October 19, 11
  36. 36. Perceived Performance @mikehostetlerWednesday, October 19, 11
  37. 37. Native Look & Feel vs. @mikehostetlerWednesday, October 19, 11
  38. 38. Device API’s @mikehostetlerWednesday, October 19, 11
  39. 39. Offline Access ( ) @mikehostetlerWednesday, October 19, 11
  40. 40. These are hard problems ... @mikehostetlerWednesday, October 19, 11
  41. 41. Choose the right tool ... @mikehostetlerWednesday, October 19, 11
  42. 42. Current Project Status @mikehostetlerWednesday, October 19, 11
  43. 43. Just released jQuery Mobile RC1 @mikehostetlerWednesday, October 19, 11
  44. 44. @mikehostetlerWednesday, October 19, 11
  45. 45. @mikehostetlerWednesday, October 19, 11
  46. 46. @mikehostetlerWednesday, October 19, 11
  47. 47. More at http://jqmgallery.com @mikehostetlerWednesday, October 19, 11
  48. 48. Standard in Adobe CS5.5 @mikehostetlerWednesday, October 19, 11
  49. 49. Shipping in Visual Studio Soon ... @mikehostetlerWednesday, October 19, 11
  50. 50. Lets dive in ... @mikehostetlerWednesday, October 19, 11
  51. 51. Download the code http://jquerymobile.com/download https://github.com/jquery/jquery-mobile or use a CDN ... @mikehostetlerWednesday, October 19, 11
  52. 52. Pages @mikehostetlerWednesday, October 19, 11
  53. 53. Your First Page! <!DocType HTML> <html> <head> <meta charset=”utf-8”> <title>My first jQuery Mobile Page!</title> </head> <body> .... </body> </html> @mikehostetlerWednesday, October 19, 11
  54. 54. Add the <script> tags ... <!DocType HTML> <html> <head> .... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.js"></script> </head> .... </html> @mikehostetlerWednesday, October 19, 11
  55. 55. Add the <script> tags ... <!DocType HTML> <html> <head> .... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.js"></script> </head> .... </html> @mikehostetlerWednesday, October 19, 11
  56. 56. Add the <script> tags ... <!DocType HTML> <html> <head> .... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.js"></script> </head> .... </html> @mikehostetlerWednesday, October 19, 11
  57. 57. Building your Page <body> <div data-role=”page”> <p>Hello World!</p> </div> </body> @mikehostetlerWednesday, October 19, 11
  58. 58. The role of data attributes ... <body> <div data-role=”page”> <p>Hello World!</p> </div> </body> @mikehostetlerWednesday, October 19, 11
  59. 59. Full Sample Page <body> <div data-role=”page”> <div data-role=”header”> ... </div> <div data-role=”content”> ... </div> <div data-role=”footer”> ... </div> </div> </body> @mikehostetlerWednesday, October 19, 11
  60. 60. Lists @mikehostetlerWednesday, October 19, 11
  61. 61. Basic List <div data-role=”content”> <h2>Hello World!</h2> <ul> <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ul> </div> @mikehostetlerWednesday, October 19, 11
  62. 62. Add the List View Role <div data-role=”content”> <h2>Hello World!</h2> <ul data-role="listview"> <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ul> </div> @mikehostetlerWednesday, October 19, 11
  63. 63. Inset Style <div data-role=”content”> <h2>Hello World!</h2> <ul data-role="listview" data-inset="true" > <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ul> </div> @mikehostetlerWednesday, October 19, 11
  64. 64. Add Links <ul data-role="listview" data-inset="true"> <li> <a href=”http://jquery.com”> jQuery </a> </li> ... </ul> @mikehostetlerWednesday, October 19, 11
  65. 65. More Examples ... @mikehostetlerWednesday, October 19, 11
  66. 66. Ordered Lists <div data-role=”content”> <h2>Hello World!</h2> <ol data-role="listview"> <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ol> </div> @mikehostetlerWednesday, October 19, 11
  67. 67. Nested Lists = Drillable Pages @mikehostetlerWednesday, October 19, 11
  68. 68. Count Bubbles <ul data-role="listview"> <li><a href=”http://jquery.com”> jQuery <span class="ui-li-count">1.6.4</span> </a></li> ... </ul> @mikehostetlerWednesday, October 19, 11
  69. 69. List Dividers <ul data-role="listview"> <li data-role="list-divider">Core</li> <li>jQuery</li> <li data-role="list-divider">UI</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li data-role="list-divider">Testing</li> <li>QUnit</li> </ul> @mikehostetlerWednesday, October 19, 11
  70. 70. Filter Bar <div data-role=”content”> <h2>Hello World!</h2> <ul data-role="listview" data-filter="true"> .... </ul> </div> @mikehostetlerWednesday, October 19, 11
  71. 71. Adding List Items @mikehostetlerWednesday, October 19, 11
  72. 72. Append, then Refresh! $(‘ul#jquery’). .append( ‘<li><a href=”http://sizzlejs.com”>Sizzle JS</a></li>’ ).listview( ‘refresh’ ); @mikehostetlerWednesday, October 19, 11
  73. 73. Theming @mikehostetlerWednesday, October 19, 11
  74. 74. Basic Theming <div data-role=”page” data-theme=”a”> <div data-role=”content”> .... </div> </div> @mikehostetlerWednesday, October 19, 11
  75. 75. Side by Side @mikehostetlerWednesday, October 19, 11
  76. 76. ThemeRoller @mikehostetlerWednesday, October 19, 11
  77. 77. Links & Navigation @mikehostetlerWednesday, October 19, 11
  78. 78. External Links <ul data-role="listview" data-inset="true" data-theme=”e”> <li> <a href=”http://jquery.com”> jQuery </a> </li> ... </ul> @mikehostetlerWednesday, October 19, 11
  79. 79. Internal + Hijax + DOM Injection <ul data-role="listview" data-inset="true" data-theme=”e”> Click! <li> <a href=”jquery.html”> jQuery </a> </li> ... </ul> @mikehostetlerWednesday, October 19, 11
  80. 80. Internal + Hijax + DOM Injection /index.html /jquery.html @mikehostetlerWednesday, October 19, 11
  81. 81. Internal + Hijax + DOM Injection /index.html /jquery.html @mikehostetlerWednesday, October 19, 11
  82. 82. Internal + Hijax + DOM Injection /index.html /jquery.html @mikehostetlerWednesday, October 19, 11
  83. 83. Transitions @mikehostetlerWednesday, October 19, 11
  84. 84. External Links <ul data-role="listview" data-inset="true" data-theme=”e”> <li> <a href=”http://jquery.com” data-transition="pop"> jQuery a’ Poppin </a> </li> ... </ul> @mikehostetlerWednesday, October 19, 11
  85. 85. Multi-Page & Pre-Fetch @mikehostetlerWednesday, October 19, 11
  86. 86. Multiple Pages, One DOM <body> <div data-role=”page” id=”page1”> <p>Hello World!</p> </div> <div data-role=”page” id=”page2”> <p>Hello World!</p> </div> </body> @mikehostetlerWednesday, October 19, 11
  87. 87. Pre-Fetching <body> <div data-role=”page” id=”page1”> <p>Hello World!</p> <a href="prefetchMe.html" data-prefetch> ... </a> </div> <div data-role=”page” id=”page2”> <p>Hello World!</p> </div> </body> @mikehostetlerWednesday, October 19, 11
  88. 88. Forms @mikehostetlerWednesday, October 19, 11
  89. 89. Basic Form with Labels <div data-role="content"> <form action="#" method="get"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </form> </div> @mikehostetlerWednesday, October 19, 11
  90. 90. Containers <div data-role="content"> <form action="#" method="get"> <div data-role="fieldcontain"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </div> </form> </div> @mikehostetlerWednesday, October 19, 11
  91. 91. Optimized for Width Changes @mikehostetlerWednesday, October 19, 11
  92. 92. Progressive Enhancement @mikehostetlerWednesday, October 19, 11
  93. 93. Text Input <div data-role="content"> <form action="#" method="get"> <div data-role="fieldcontain"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </div> </form> </div> @mikehostetlerWednesday, October 19, 11
  94. 94. Text Input Helpers ”password” ”email” ”tel” @mikehostetlerWednesday, October 19, 11
  95. 95. Text Area’s Grow @mikehostetlerWednesday, October 19, 11
  96. 96. Flip Switch <form action="#" method="get"> <div data-role="fieldcontain"> <label for="slide">Flip switch:</label> <select name="slide" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> </div> </form> </div> @mikehostetlerWednesday, October 19, 11
  97. 97. Radio Buttons <form action="#" method="get"> <div data-role="fieldcontain"> <input type="radio" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form> </div> @mikehostetlerWednesday, October 19, 11
  98. 98. Checkboxes Too <form action="#" method="get"> <div data-role="fieldcontain"> <input type="checkbox" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form> </div> @mikehostetlerWednesday, October 19, 11
  99. 99. Horizontal Set <form action="#" method="get"> <div data-role="fieldcontain" data-type=”horizontal”> <input type="checkbox" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form> </div> @mikehostetlerWednesday, October 19, 11
  100. 100. Select Lists <form action="#" method="get"> <div data-role="fieldcontain"> <label for="choice-1"> Choose shipping method:</label> <select name="choice-1"> <option value="std">Standard: 7 day </option> ... </select> </div> </form> </div> @mikehostetlerWednesday, October 19, 11
  101. 101. Select Lists <form action="#" method="get"> <div data-role="fieldcontain"> <label for="choice-1"> Choose shipping method:</label> <select name="choice-1"> <option value="std">Standard: 7 day </option> ... </select> </div> </form> </div> @mikehostetlerWednesday, October 19, 11
  102. 102. Select Lists - Non-Native <form action="#" method="get"> <div data-role="fieldcontain"> <label for="choice-1"> Choose shipping method:</label> <select name="choice-1" data-native-menu="false"> <option value="std">Standard: 7 day </option> ... </select> </div> </form> @mikehostetlerWednesday, October 19, 11
  103. 103. Extra’s @mikehostetlerWednesday, October 19, 11
  104. 104. Dialog’s <div data-role="content"> <a href="foo.html" data-rel="dialog">Open dialog</a> </div> @mikehostetlerWednesday, October 19, 11
  105. 105. Button’s <div data-role="content"> <a href="#" data-role="button"> Link Button</a> <a href="#" data-role="button" data-icon="star">Star Icon!</a> </div> @mikehostetlerWednesday, October 19, 11
  106. 106. Toolbar’s <div data-role="page"> <div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="index.html" data-icon="check">Save</a> </div> </div> @mikehostetlerWednesday, October 19, 11
  107. 107. Navbar’s <div data-role="page"> .... <div data-role="footer"> <div data-role="navbar"> <ul> <li>Summary</li> ... </ul> </div> </div> </div> @mikehostetlerWednesday, October 19, 11
  108. 108. Fixed Positioning <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Fixed toolbars</h1> </div> </div> @mikehostetlerWednesday, October 19, 11
  109. 109. Persistent Footer Bar <div data-role="footer"> <div data-role="navbar" class="ui-state-persist"> <p><a href=”#”>Friends</a></p> </div> </div> @mikehostetlerWednesday, October 19, 11
  110. 110. Events @mikehostetlerWednesday, October 19, 11
  111. 111. New Events ‣ tap, taphold ‣ swipe, swipeleft, swiperight ‣ scrollstart, scrollstop ‣ orientationchange ‣ Page Load: pageloadbefore, pageload, pageloadfailed ‣ Page Change: pagechangebefore, pagechange, pagechangefailed ‣ Many More! @mikehostetlerWednesday, October 19, 11
  112. 112. Virtual Mouse Events ‣ vmouseover ‣ vmousedown ‣ vmousemove ‣ vmouseup ‣ vmouseclick - WARNING! ‣ vmousecancel @mikehostetlerWednesday, October 19, 11
  113. 113. API Methods @mikehostetlerWednesday, October 19, 11
  114. 114. Changing Pages // Mimic’s a ‘tap’ or ‘click’ $.mobile.changePage( ‘about/us.html’ OR $(‘#about’), { /* options */ } ); // Fetches external URL, inserts it into the DOM $.mobile.loadPage( ‘about/us.html’, { /* options */ } ); @mikehostetlerWednesday, October 19, 11
  115. 115. Loading Message $.mobile.showLoadingMessage() $.mobile.hideLoadingMessage() @mikehostetlerWednesday, October 19, 11
  116. 116. The Data Question ... @mikehostetlerWednesday, October 19, 11
  117. 117. Those data- attributes ... Don’t use: $.data Use: jqmData() and jqmRemoveData() @mikehostetlerWednesday, October 19, 11
  118. 118. URL’s & Paths @mikehostetlerWednesday, October 19, 11
  119. 119. URL’s & Paths $.mobile.path URL: http://jblas:password@mycompany.com:8080/mail/inbox? msg=1234&type=unread#msg-content obj = { domain: ‘http://jblas:password@mycompany.com:8080’, host: ‘mycompany.com:8080’, pathname: ’/mail/inbox’, directory: ‘/mail/’ } @mikehostetlerWednesday, October 19, 11
  120. 120. Thanks to the Filament Group! http://filamentgroup.com @mikehostetlerWednesday, October 19, 11
  121. 121. Thanks to the jQuery Mobile Team! @mikehostetlerWednesday, October 19, 11
  122. 122. Thanks to the Sponsors! @mikehostetlerWednesday, October 19, 11
  123. 123. Thank You! @mikehostetler http://mike-hostetler.com http://learn.appendto.com Links: http://bitly.com/neWK0v Rate: http://j.mp/nQgs8V @mikehostetlerWednesday, October 19, 11
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×