Advanced Search

JQuery Mobile 1 Page Example

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

Expand | Embed | Plain Text

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.