Advanced Search

JQuery Mobile Multipage Example - Contact.Html

/ 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>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. 	<style>
  14. 		.ui-icon-envato {
  15. 			/*Styles the icon on button */	
  16. 			background: red;
  17. 			border: 1px solid #333;			
  18. 		}
  19. 	</style>
  20.  
  21. </head> 
  22. <body> 
  23.  
  24. 	<!-- Start of Contact page -->
  25. 	<div data-role="page" id="contact">
  26.  
  27. 		<div data-role="header">
  28. 			<h1>Contact Page</h1>
  29. 		</div><!-- /header -->
  30.  
  31. 		<div data-role="content" data-theme="e">	
  32. 			<p>Contact Form coming Soon...</p>		
  33.  
  34. 			<a data-role="button" href="#" data-inline="true" data-transition="fade" data-icon="gear" data-iconpos="notext">Anchor Button</a>
  35.  
  36. 			<button data-inline="true" data-theme="e" data-icon="envato" data-iconpos="right"> Custom Icon Button </button>
  37.  
  38. 			<button data-inline="true" data-theme="e" data-icon="delete" data-iconpos="right"> Submit Button </button>
  39.  
  40. 			<!--	Note Bug in Source so you must add data-theme="e" to continue style flow in some elements like buttons	-->
  41. 			<input type="submit" name="" value="Input Button" data-inline="true" data-icon="minus" />
  42. 			<hr/>
  43.  
  44. 			Grid aligning elements 2 Coloumn using "ui-grid-a"
  45. 			<div class="ui-grid-a">
  46. 				<div class="ui-block-a">
  47. 					<input type="submit" name="" value="Input Button" />
  48. 				</div>
  49. 				<div class="ui-block-b">
  50. 					<input type="submit" name="" value="Input Button" />
  51. 				</div>
  52. 			</div>
  53. 			Grid aligning elements 3 Coloumn using "ui-grid-b"
  54. 			<div class="ui-grid-b">
  55. 				<div class="ui-block-a">
  56. 					<input type="submit" name="" value="Input Button" />
  57. 				</div>
  58. 				<div class="ui-block-b">
  59. 					<input type="submit" name="" value="Input Button" />
  60. 				</div>
  61. 				<div class="ui-block-c">
  62. 					<input type="submit" name="" value="Input Button" />
  63. 				</div>
  64. 			</div>
  65.  
  66. 			<hr/>
  67. 			<p><a data-role="button" href="index.html" data-inline="true" data-transition="fade">Back to Home</a></p>	
  68. 			<p><a data-role="button" href="about.html" data-inline="true" data-transition="flip">Back to About</a></p>	
  69. 		</div><!-- /content -->
  70.  
  71. 		<div data-role="footer">
  72. 			<h4>Page Footer</h4>
  73. 		</div><!-- /footer -->
  74.  
  75. 	</div><!-- /page -->
  76.  
  77. </body>
  78. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.