在移動設備上開發Web應用程序時，我們希望頁面具有一個類似原生應用程序的感覺，而不是傳統的桌面網站的頁面加載效果。幸運的是，jQuery Mobile（簡稱jQM）已經成為了為移動Web應用程序開發提供解決方案的熱門框架之一。
以下是一個基本的 jQM 頁面的代碼：
<html> <head> <title>jQuery Mobile Page</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>Content goes here.</p> </div> <div data-role="footer"> <h1>Footer</h1> </div> </div> </body> </html>
上面的代碼演示了一個最基本的 jQM 頁面，頁面包含一個頭部、一個內容部分和一個底部。注意“data-role”屬性，這是 jQM 的關鍵屬性之一。通過使用這些屬性，jQM 將自動為我們實現各種頁面元素和效果。
對于頁面之間的切換，jQM 提供了一組簡單有效的 API ，其中最流行的是使用“data-transition”屬性來指定頁面之間的轉場效果。
以下是一個包含滑動切換頁面的例子：
<div data-role="page"> <div data-role="header"> <h1>Page 1</h1> </div> <div data-role="content"> <p>This is page 1.</p> <a href="#page2" data-transition="slide">Go to Page 2</a> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h1>Page 2</h1> </div> <div data-role="content"> <p>This is page 2.</p> <a href="#page1" data-transition="slide" data-direction="reverse">Go to Page 1</a> </div> </div>
上面的代碼創建了兩個頁面，其中第一個頁面包含一個指向第二個頁面的鏈接，第二個頁面包含一個指向第一個頁面的鏈接。這里使用了“data-transition”屬性指定了頁面之間的轉場效果，當鏈接被點擊時，頁面將沿著一個給定的方向滑動，這里是“slide”（Slide ）效果。
總之，通過使用 jQM 的 API , 我們可以輕松地創建一個流暢的滑動切換頁面應用程序，具有良好的交互體驗，對移動設備用戶友好。