jQuery Mobile 基本頁面結構
大部分jQuery Mobile Web應用程序都要遵循下面的基本模板
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
要使用 jQuery Mobile，首先需要在開發的界面中包含如下3個內容
- CSS文件jquery.mobile-1.0a1.min.css
- jQuery library jquery-1.4.3.min.js
- jQuery Mobile library jquery.mobile-1.0a1.min.js
在上面的頁面基本模板中，引入這三個元素采用的是jQuery CDN方式，開發人員也可以下載這些文件及主題到你的服務器上。
我們可以看到頁面中的內容都是包裝在div標簽中並在標簽中加入data-role=”page”屬性。 這樣jQuery Mobile就會知道哪些內容需要處理。
說明：data-屬性是HTML5新推出的很有趣的一個特性，它可以讓開發人員添加任意屬性到html標簽中,只要添加的屬性名有“data-”前綴。
在”page”div中，還可以包含”header”， ”content”， ”footer”的div元素,這些元素都是可選的，但至少要包含一個 “content”div。
| <div data-role=”header”></div> |
在頁面的頂部建立導航工具欄，用於放置標題和按鈕（典型的至少要放一個“返回”按鈕，用於返回前一頁）。通過添加額外的屬性 data-position=”fixed”，可以保證頭部始終保持屏幕的頂部 |
| <div data-role=”content”></div> |
包含一些主要內容，例如文本內容，圖像，按鈕，列表，表單等等 |
| <div data-role=”footer”></div> |
在頁面的底建立工具欄，添加一些功能按鈕 為了確保它始終保持在頁面的底部，可以給其加上data-position=”fixed” 屬性 |
多個頁面在同一個頁面中
有一種建立在一個 HTML頁面基礎之上的頁面結構，即在一個頁面中添加多個data-role=”page”。這意味着瀏覽器僅僅得到一個頁面，就可以實現頁面平滑切換的客戶體驗。參看下面實例：(目前有bug)
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <title>jQuery Mobile: Pages within Pages</title> 8 9 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 10 11 <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 12 13 <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 14 15 </head> 16 17 <body> 18 19 20 21 <div data-role="page" id="home"> 22 23 24 25 <div data-role="header"> 26 27 <h1>Home</h1> 28 29 </div> 30 31 32 33 <div data-role="content"> 34 35 <p><a href="#about">About this app</a></p> 36 37 </div> 38 39 40 41 </div> 42 43 44 45 <div data-role="page" id="about"> 46 47 48 49 <div data-role="header"> 50 51 <h1>About This App</h1> 52 53 </div> 54 55 56 57 <div data-role="content"> 58 59 <p>This app rocks! <a href="#home">Go home</a></p> 60 61 </div> 62 63 64 65 </div> 66 67 68 69 </body> 70 71 </html>
正如所見，上面的代碼中包含了兩個”page”:主頁（id為home）和”about”(id為about)。從Home鏈接到About頁面采用的是連接地址為#about，about頁面返回到首頁的鏈接地址為#home。jQuery Mobile會自動切換鏈接的目的div顯示到移動瀏覽器中。該框架會隱藏除第一個包含data-role=”page”div以外的其它”page”
AJAX 導航
為了實現在移動設備上的無縫客戶體驗，jQuery Mobile默認采用AJAX的方式載入一個目的鏈接頁面。因此，當在瀏覽器中點擊一個鏈接打一個新的頁面時，jQuery Mobile接收這個鏈接，通過AJAX的方式請求鏈接頁面，並把請求得到的內容注入到當前頁面的DOM里。另外還需要確保請求的頁面url唯一標識的。
這樣的結果就是用戶交互始終保存在同一個頁面中。新頁面中的內容也會輕松的顯示到這個頁面里。這種平滑的客戶體驗相比於傳統打開一個新的頁面並等待數秒的方式要好很多。當一個新的頁面做為新的data-role=”page” div插入到主頁面時，主頁面會有效的緩存取到的內容。使得當要訪問一個頁面時能夠盡快的顯示出來。這個工作過程聽起來難以置信的復雜，但是做為開發人員的我們大部份不需要了解其中工作的具體細節。只要能看到效果就OK。
注意:如果你不想采用AJAX的方式加載頁面，而想以原生的頁面加載方式打開一個鏈接頁面，只需要在打開的鏈接上添加屬性 rel=”external”屬性
頁面切換效果
你可以使用多種不同的切換效果來顯示新頁面內容，只需要在鏈接里添加data-transition屬性即可。可能的值如下
| slide |
從右到左切換（默認） |
| slideup |
從下到上切換 |
| slidedown |
從上到下切換 |
| pop |
以彈出的形式打開一個頁面 |
| fade |
漸變退色的方式切換 |
| flip |
舊頁面翻轉飛出，新頁面飛入 |
例如
<p><a href=”#about” data-transition=”flip”>關於頁面</a></p>
在瀏覽器中查看效果
注意：查看以上的效果需要您的瀏覽器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。