Jquery Mobile是一款優秀的開源Web框架，旨在幫助開發人員快速創建響應式、跨平臺的移動應用。它基于jQuery庫，提供了易于使用的API和插件，可使開發過程更加簡單、流暢。下面我們來看看如何使用jQuery Mobile搭建一個簡單的移動應用。
<!DOCTYPE html> <html> <head> <title>My Awesome App</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入jQuery庫和jQuery Mobile庫 --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" > <script src="https://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>My Awesome App</h1> </div> <div data-role="content"> <p>Hello, World! This is my first jQuery Mobile app.</p> </div> <div data-role="footer"> <p>Copyright ? 2021 My Awesome App</p> </div> </div> </body> </html>
在上述代碼中，我們首先在頭部定義頁面的標題、字符集和窗口大小等元數據信息。然后在body部分，我們用一個含有data-role="page"屬性的div元素來定義整個頁面，然后再通過data-role="header"、data-role="content"、data-role="footer"等屬性來定義頭部、內容和底部。jQuery Mobile框架會根據這些屬性自動渲染出相應的組件，如標題欄、按鈕、表單、列表等。這樣一來，我們就可以更加方便地構建出一個跨平臺、響應式的移動應用了。