一：文件引用：
<meta name="viewport" content="width=device-width, initial-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>
二：pages
在<body>标签内，移动网站的每一个视图或者“page”都要通过 data-role="page" 属性的标签来定义。
<div data-role="page">... </div>
在page容器内，任何有效的html标签都可以使用，但是对于Jquery Mobile的典型页面来说，page容器的直接子结点应该为使用"data-role"标记属性为"header""content"和"footer"的3个容器。
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
多个页面的模板结构 Multi-page template structure
一个独立的html文件可以包含多个“pages”,在加载的时候这些data-role="page" 的div会一起堆栈加载。每一个page区块需要由一个独特的ID(id="foo")标记，通过 给内部链接地址定义为(herf="#foo"),互相跳转。当连接被点击时，JQmoblie会在 文档内寻找带有ID的page容器，然后通过页面转场显示。
代码：
1 <!-- Start of first page --> 2 <div data-role="page" id="foo"> 3 <div data-role="header"> 4 <h1>Foo</h1> 5 </div><!-- /header --> 6 <div data-role="content"> 7 <p>I'm first in the source order so I'm shown as the page.</p> 8 <p>View internal page called <a href="#bar">bar</a></p> 9 <p>View internal page called <a href="#dada">dada</a></p> 10 </div><!-- /content --> 11 <div data-role="footer"> 12 <h4>Page Footer</h4> 13 </div><!-- /footer --> 14 </div><!-- /page --> 15 <!-- Start of second page --> 16 <div data-role="page" id="bar"> 17 <div data-role="header"> 18 <h1>Bar</h1> 19 </div><!-- /header --> 20 <div data-role="content"> 21 <p>I'm first in the source order so I'm shown as the page.</p> 22 <p><a href="#foo">Back to foo</a></p> 23 <p>View internal page called <a href="#dada">dada</a></p> 24 </div><!-- /content --> 25 <div data-role="footer"> 26 <h4>Page Footer</h4> 27 </div><!-- /footer --> 28 </div><!-- /page --> 29 <!-- Start of third page --> 30 <div data-role="page" id="dada"> 31 <div data-role="header"> 32 <h1>Imdada</h1> 33 </div><!-- /header --> 34 <div data-role="content"> 35 <p>I'm dada,third page.xixi.</p> 36 <p><a href="#foo">Back to foo</a></p> 37 <p><a href="#bar">Back to bar</a></p> 38 </div><!-- /content --> 39 <div data-role="footer"> 40 <h4>Page Footer</h4> 41 </div><!-- /footer --> 42 </div><!-- /page -->
上面的代码是三个页面的。
demo：