1.2.jquerymobile--外部页面

 

 

注意：请把程序发布到动态语言开发环境中，比如php的AppServ中，因为如果放在静态目录中，可能导致文件链接失效。

 

运行效果和上一篇多页面一样，注意：在第二个文件中并不需要再倒入jquerymobile框架文件！！

 

index.html

<!DOCTYPE html> 
<html> 
<html lang="zh-CN">
	<head> 
	<title>JqueryMobile--外部页面</title> 
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="jquery.mobile-1.0.1.css" />
	<script src="jquery.js"></script>
	<script src="jquery.mobile-1.0.1.js"></script>
</head> 
<body> 
	<section id="homepage" data-role="page">
		

			<header data-role="header">
				<h1>页面一</h1>
			</header><!-- /header -->

			<div data-role="content">	
				<p><a href="index2.html">链接到第二个页面</a></p>
				<p>页面一</p>		
			</div><!-- /content -->
			
			<footer data-role="footer">
				<h4>页面一</h4>
			</footer>
			
			
	</section><!-- /page -->
	
	
</body>
</html>

 

index2.html

<!DOCTYPE html> 
<html> 
<html lang="zh-CN">
	<head> 
	<title>JqueryMobile--外部页面</title> 
	<meta charset="utf-8"/>
</head> 
<body> 
	
	
	<section id="gallery" data-role="page">
		

			<header data-role="header">
				<h1>页面二</h1>
			</header><!-- /header -->

			<div data-role="content">	
				<p><a href="index.html">链接到第一个页面</a></p>
				<p>页面二</p>		
			</div><!-- /content -->
			
			<footer data-role="footer">
				<h4>页面二</h4>
			</footer><!-- /footer -->
			
			
	</section><!-- /page -->
</body>
</html>
posted @ 2012-03-16 11:47  校长阿四  阅读(398)  评论(1)  编辑  收藏  举报