Return to Snippet

Revision: 51735
at October 2, 2011 23:58 by craigmoss


Initial Code
<!DOCTYPE html> 
<html> 
	<head> 
	<title>2 Page JQuery Mobile Site</title> 
	
	
	<!--	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. -->
	<meta name="viewport" content="width=device-width, initial-scale=1"> 

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
	
</head> 
<body> 
	<!--  -->

	<!-- Start of first page -->
	<div data-role="page" id="home">

		<div data-role="header">
			<h1>Home Page</h1>
		</div><!-- /header -->

		<div data-role="content">	
			<p>I'm first in the source order so I'm shown as the page.</p>		
			<p>
				Load External page Not Asychronously using 'rel="external"', see code comments...
				<!--	<a href="about.html" data-transition="slide-down" rel="external">Read More About Us</a>	-->	
				<a href="about.html" data-transition="pop" data-rel="dialog">Dialog - About Us Page</a>
			</p>	
			<p>
				Possible Transition Values:
				<ol>
					<li>slide</li>
					<li>slide-up</li>
					<li>slide-down</li>
					<li>pop</li>
					<li>fade</li>
					<li>flip</li>
				</ol>
			</p>

			<p><a data-role="button" href="contact.html" data-inline="true" data-transition="slide-up">Contact Us Button</a></p>

			<p><a data-role="button" href="form.html" data-inline="true" data-transition="slide-up">Form Example</a></p>
		
		</div><!-- /content -->

		<div data-role="footer">
			<h4>Page Footer</h4>
		</div><!-- /footer -->
	</div><!-- /page -->
	
</body>
</html>

Initial URL

                                

Initial Description
index.html

Initial Title
JQuery Mobile Multipage Example - index.html

Initial Tags
jquery, mobile

Initial Language
jQuery