一：文件引用：
<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：