JQuery Mobile 1 Page Example


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Page Title</title>
  5.  
  6.  
  7. <!-- By setting the viewport attributes to content="width=device-width, initial-scale=1, the width will be set to the pixel width of the device screen. -->
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9.  
  10. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
  11. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
  12. <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
  13.  
  14. </head>
  15. <body>
  16.  
  17. <div data-role="page">
  18.  
  19.  
  20. <header data-role="header">
  21. <h1>Page Title</h1>
  22. </header>
  23.  
  24.  
  25. <div data-role="content" data-theme="a">
  26.  
  27. <ul data-role="listview" data-inset="true" data-filter="true" data-theme="d">
  28. <li>
  29. <a href="#"> Some Text </a>
  30. </li>
  31. <li>
  32. <a href="#"> Some Text </a>
  33. </li>
  34. <li>
  35. <a href="#"> Some Text </a>
  36. </li>
  37.  
  38. <li data-role="list-divider"> List Divider </li>
  39.  
  40. <li>
  41. <a href="#"> Some Text </a>
  42. </li>
  43. <li>
  44. <a href="#"> Some Text </a>
  45. </li>
  46. <li> Cars
  47. <ol>
  48. <li>Some Text</a></li>
  49. <li>Some Text</a></li>
  50. <li>Some Text</a></li>
  51. </ol>
  52. </li>
  53.  
  54. <li data-role="list-divider"> List Divider </li>
  55.  
  56. <li>
  57. <img src="images/two-pirates.jpg" alt="JQuery Mobile" />
  58. <h3> <a href="#"> My Thumbnails Image </a> </h3>
  59. <p> Here is a description of the thumnail. </p>
  60. </li>
  61. <li>
  62. <img src="images/add2.ico" alt="JQuery Mobile" class="ui-li-icon" />
  63. <h3> <a href="#"> My Icon Image </a> </h3>
  64. <p> Here is a description of the icon. </p>
  65. </li>
  66. <li>
  67. <img src="images/two-pirates.jpg" alt="JQuery Mobile" />
  68. <h3>
  69. <a href="#"> My Thumbnails Image </a>
  70. <span class="ui-li-aside"> 5:45pm </span>
  71. </h3>
  72. <p> Here is a description of the icon. </p>
  73. </li>
  74.  
  75.  
  76. </ul>
  77. </div>
  78.  
  79.  
  80. <footer data-role="footer">
  81. <h4>Page Footer</h4>
  82. </footer>
  83.  
  84.  
  85. </div><!-- end page -->
  86.  
  87. </body>
  88. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.