jQuery mobile是一款強大的移動端開發框架，它提供了豐富的UI組件和跨平臺兼容性，讓我們可以快速開發出高質量的移動應用。在這里我們將介紹如何使用jQuery mobile來開發一個簡單的登陸頁面。
首先我們需要引入jQuery和jQuery mobile的庫文件，代碼如下：
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
接著，我們可以開始編寫登陸頁面的HTML代碼，如下所示：
<div data-role="page"> <div data-role="header"> <h1>登陸</h1> </div> <div data-role="main" class="ui-content"> <form> <label for="username">用戶名:</label> <input type="text" id="username" placeholder="請輸入用戶名"> <label for="password">密碼:</label> <input type="password" id="password" placeholder="請輸入密碼"> <button type="submit">登陸</button> </form> </div> <div data-role="footer"> <h4>版權所有 ? 2021</h4> </div> </div>
在這里，我們使用了jQuery mobile提供的data-role屬性和class屬性來定義頁面結構和樣式。form標簽用于提交用戶的用戶名和密碼，button標簽則是用于觸發登陸操作。
最后，我們將我們的登陸頁面的HTML和庫文件代碼合并在一起，將整個頁面放置到一個HTML文件中即可：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登陸</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <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>登陸</h1> </div> <div data-role="main" class="ui-content"> <form> <label for="username">用戶名:</label> <input type="text" id="username" placeholder="請輸入用戶名"> <label for="password">密碼:</label> <input type="password" id="password" placeholder="請輸入密碼"> <button type="submit">登陸</button> </form> </div> <div data-role="footer"> <h4>版權所有 ? 2021</h4> </div> </div> </body> </html>
完成上述步驟之后，我們就可以在移動設備上訪問該頁面了，進行用戶名和密碼的登陸操作。