data-role定义了这个div是一个“page”,page这个术语稍微有点让人误解,“page”这里其实指的是一个可视面或者在屏幕里未 隐藏的HTML代码部分,而不是指的一个单独的页面(或者说单独的HTML文件)。data-role="page" 意味着jQueryMobile会根据div元素在屏幕中构建可视内容。而id属性允许你通过a标签链接到该page,或者其他page。
当你想要链接到你自己的web程序之外的某些链接时,必须添加rel="external",否则无法实现跳转
例如:<a href="http://www.madinc.co" rel="external">madinc.co</a>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<!-- Start of first page -->
<!-- data-role定义了这个div是一个“page”,page这个术语稍微有点让人误解,“page”这里其实指的是一个可视面或者在屏幕里未 隐藏的HTML代码部分,而不是指的一个单独的页面(或者说单独的HTML文件)。data-role="page" 意味着jQueryMobile会根据div元素在屏幕中构建可视内容。而id属性允许你通过a标签链接到该page,或者其他page。-->
<div data-role="page" id="menu">
<div data-role="header">
<h1>Menu</h1>
</div><!-- /header -->
<div data-role="content">
<p>What vehicles do you like?</p>
<p><a href="#Cars">Cars</a></p>
<p><a href="#Trains">Trains</a></p>
<p><a href="#Planes">Planes</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="Cars">
<div data-role="header">
<h1>Cars</h1>
</div><!-- /header -->
<div data-role="content">
<p>We can add a list of cars</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of third page -->
<div data-role="page" id="Trains">
<div data-role="header">
<h1>Trains</h1>
</div><!-- /header -->
<div data-role="content">
<p>We can add a list of trains</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of fourth page -->
<div data-role="page" id="Planes">
<div data-role="header">
<h1>Planes</h1>
</div><!-- /header -->
<div data-role="content">
<p>We can add a list of planes</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->