jQuery Mobile 是一個(gè)基于 jQuery 庫(kù)的移動(dòng)應(yīng)用開(kāi)發(fā)框架。它提供了許多 UI 組件和工具，能夠輕松地創(chuàng)建跨平臺(tái)應(yīng)用程序。在開(kāi)始使用 jQuery Mobile 之前，我們需要對(duì)其進(jìn)行一些配置。
首先，我們需要在 HTML 文檔中引用 jQuery 核心庫(kù)和 jQuery Mobile 庫(kù)：
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
在這里，我們引用了 jQuery 3.5.1 版本的庫(kù)文件和 jQuery Mobile 1.5.0-alpha.1 版本的庫(kù)文件。
然后，我們需要在 HTML 文檔的 <head> 標(biāo)簽中插入下面這行代碼，以便在頁(yè)面加載時(shí)啟動(dòng) jQuery Mobile：
<script>$(document).on("mobileinit", function() { $.extend( $.mobile , { autoInitializePage: false }); });</script>這行代碼會(huì)將 autoInitializePage 屬性設(shè)為 false，從而禁用 jQuery Mobile 自動(dòng)初始化頁(yè)面的功能。我們將在后面手動(dòng)初始化每個(gè)頁(yè)面。
最后，在 HTML 文檔的 <body> 標(biāo)簽中，我們需要為每個(gè)頁(yè)面創(chuàng)建一個(gè) div 元素，并設(shè)置 data-role 屬性為 "page"，如下所示：
<div data-role="page" id="page1"> <div data-role="header"> <h1>頁(yè)面標(biāo)題</h1> </div> <div data-role="content"> <p>頁(yè)面內(nèi)容</p> </div> </div>
這個(gè) div 中會(huì)包含頁(yè)面的所有內(nèi)容，如頁(yè)眉、頁(yè)腳、內(nèi)容等。我們需要注意的是，每個(gè)頁(yè)面都需要設(shè)置一個(gè)唯一的 id 屬性。
通過(guò)上述配置，我們就可以開(kāi)始使用 jQuery Mobile 來(lái)開(kāi)發(fā)移動(dòng)應(yīng)用程序了。