jQuery_mobile中的頁面切換可以使用data-transition屬性的鏈接或表單提交，jQuery_mobile庫中支持的有以下幾種：css
| fade | 默認。淡入到下一頁 | |
| flip | 從後向前翻轉到下一頁 | |
| flow | 拋出當前頁，進入下一頁 | |
| pop | 像彈出窗口同樣進入下一頁 | |
| slide | 從右到左滑動到下一頁 | |
| slidefade | 從右到左滑動並淡入到下一頁 | |
| slideup | 從下到上滑動到下一頁 | |
| slidedown | 從上到下滑動到下一頁 | |
| turn | 翻到下一頁 | |
| none | 沒有切換效果 |
上面的全部效果支持後退行爲。例如，若是您想要頁面從左向右滑動，而不是從右向左滑動，請使用帶有 "reverse" 值的 data-direction 屬性。在後退按鈕上這是默認的。html
代碼：jquery
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>歡迎來到個人主頁</h1> </div> <div data-role="content"> <p>點擊連接查看flip（翻轉）效果。 flip effect.</p> <a href="#pagetwo" data-transition="flip">翻轉到第二頁</a>//默認是從左到右的翻轉 </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <a href="#" data-icon="back" data-rel="back">返回</a>//第二個頁面返回的時候，默認是從右到左的返回 <h1>歡迎來到個人主頁</h1> </div> <div data-role="content"> <p>點擊連接返回上一個頁面。<b>注意</b>: fade（淡入）效果是默認的</p> <a href="#pageone" data-transition="flip" data-direction="reverse">返回第一個頁面</a>//若是要鏈接跳轉返回，須要加data-direction="reverse"這個屬性，纔會有從右到左的返回， </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>