jQuery Mobile 是一個流行的基于 jQuery 的移動端網(wǎng)頁開發(fā)框架，它提供了豐富的組件和功能，能夠快速構(gòu)建符合移動設(shè)備特點的網(wǎng)頁應(yīng)用程序。下面，我們將介紹一個簡單的 jQuery Mobile 例子，來說明如何使用這個框架進行開發(fā)。 首先，在 HTML 中引入 jQuery 庫和 jQuery Mobile 插件：

<!-- 引入 jQuery 庫 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入 jQuery Mobile 插件 -->
<link rel="stylesheet" >
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>

然后，我們可以創(chuàng)建一個簡單的頁面，用來顯示一個列表。當(dāng)點擊列表項時，會彈出一個提示框顯示選中項的編號。代碼如下：

<!-- 創(chuàng)建一個頁面 -->
<div data-role="page" id="page1">
<!-- 頁面頭部 -->
<div data-role="header">
<h1>My Page</h1>
</div>
<!-- 頁面內(nèi)容 -->
<div data-role="content">
<ul data-role="listview">
<li><a href="#" data-index="1">Item 1</a></li>
<li><a href="#" data-index="2">Item 2</a></li>
<li><a href="#" data-index="3">Item 3</a></li>
<li><a href="#" data-index="4">Item 4</a></li>
</ul>
</div>
<!-- 頁面底部 -->
<div data-role="footer">
<h4>My Footer</h4>
</div>
</div>
<!-- 創(chuàng)建一個提示框 -->
<div data-role="popup" id="popup1">
<p id="popup_content"></p>
</div>
<!-- 頁面初始化時綁定點擊事件 -->
<script>
$(document).on("pagecreate", "#page1", function() {
$("ul[data-role='listview'] a").click(function() {
var index = $(this).data("index");
$("#popup_content").text("You selected item " + index);
$("#popup1").popup("open");
});
});
</script>

以上代碼使用了 jQuery Mobile 提供的四個組件：page、header、content、footer、listview。同時，我們還創(chuàng)建了一個提示框 popup，用來顯示選中項的編號。通過 jQuery 的 on() 方法，綁定了列表項的點擊事件，當(dāng)點擊列表項時，會修改提示框中的內(nèi)容，并彈出該提示框。 這是一個非常簡單的例子，但已經(jīng)涵蓋了 jQuery Mobile 的基本用法。如果希望進一步學(xué)習(xí)該框架，可以參考官方文檔進行深入了解。