Advanced Search

JQuery Mobile Multipage Example - index.html

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html> 
  2. <html> 
  3. 	<head> 
  4. 	<title>2 Page JQuery Mobile Site</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.  
  18. 	<!-- Start of first page -->
  19. 	<div data-role="page" id="home">
  20.  
  21. 		<div data-role="header">
  22. 			<h1>Home Page</h1>
  23. 		</div><!-- /header -->
  24.  
  25. 		<div data-role="content">	
  26. 			<p>I'm first in the source order so I'm shown as the page.</p>		
  27. 			<p>
  28. 				Load External page Not Asychronously using 'rel="external"', see code comments...
  29. 				<!--	<a href="about.html" data-transition="slide-down" rel="external">Read More About Us</a>	-->	
  30. 				<a href="about.html" data-transition="pop" data-rel="dialog">Dialog - About Us Page</a>
  31. 			</p>	
  32. 			<p>
  33. 				Possible Transition Values:
  34. 				<ol>
  35. 					<li>slide</li>
  36. 					<li>slide-up</li>
  37. 					<li>slide-down</li>
  38. 					<li>pop</li>
  39. 					<li>fade</li>
  40. 					<li>flip</li>
  41. 				</ol>
  42. 			</p>
  43.  
  44. 			<p><a data-role="button" href="contact.html" data-inline="true" data-transition="slide-up">Contact Us Button</a></p>
  45.  
  46. 			<p><a data-role="button" href="form.html" data-inline="true" data-transition="slide-up">Form Example</a></p>
  47.  
  48. 		</div><!-- /content -->
  49.  
  50. 		<div data-role="footer">
  51. 			<h4>Page Footer</h4>
  52. 		</div><!-- /footer -->
  53. 	</div><!-- /page -->
  54.  
  55. </body>
  56. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.