超链接

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 -->