Jquery Mobile 是一個(gè)基于Jquery框架的移動(dòng)應(yīng)用開發(fā)框架，它提供了大量UI控件，可以幫助我們輕松地構(gòu)建移動(dòng)應(yīng)用。下面我們來(lái)介紹幾個(gè)常用的控件。

//創(chuàng)建列表視圖控件
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">第一項(xiàng)</a></li>
<li><a href="#">第二項(xiàng)</a></li>
<li><a href="#">第三項(xiàng)</a></li>
</ul>

列表視圖控件是jquery Mobile中最常用的控件之一，它可以在移動(dòng)設(shè)備上呈現(xiàn)出類似于原生應(yīng)用的列表形式。在上面的代碼中，我們使用data-role屬性創(chuàng)建了一個(gè)列表視圖控件，data-inset屬性設(shè)置為true可以讓列表項(xiàng)和容器之間有一定的間距，data-filter屬性設(shè)置為true可以添加一個(gè)過(guò)濾器，讓用戶能夠搜索列表項(xiàng)。

//創(chuàng)建按鈕控件
<a href="#" data-role="button">一個(gè)按鈕</a>

按鈕控件是jquery Mobile中另一個(gè)常用的控件，它可以讓我們?cè)谝苿?dòng)設(shè)備上創(chuàng)建各種類型的按鈕。在上面的代碼中，我們使用data-role屬性創(chuàng)建了一個(gè)按鈕控件。在移動(dòng)設(shè)備上，按鈕控件通常會(huì)被扁平化，并且有一些樣式和交互效果。

//創(chuàng)建導(dǎo)航條控件
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active ui-state-persist">第一項(xiàng)</a></li>
<li><a href="#">第二項(xiàng)</a></li>
<li><a href="#">第三項(xiàng)</a></li>
</ul>
</div>

導(dǎo)航條控件可以讓我們?cè)谝苿?dòng)應(yīng)用中快速地導(dǎo)航到其他頁(yè)面或功能。在上面的代碼中，我們使用data-role屬性創(chuàng)建了一個(gè)導(dǎo)航條控件，并且使用ui-btn-active類和ui-state-persist類來(lái)設(shè)置第一項(xiàng)為默認(rèn)選中狀態(tài)，ui-btn-active類用于標(biāo)識(shí)選中狀態(tài)，ui-state-persist類用于設(shè)置選中狀態(tài)在刷新頁(yè)面后依然保持。