jQuery Mobile是一個專為創(chuàng)建移動Web應(yīng)用而開發(fā)的框架。它提供了大量的Widget來優(yōu)化用戶的移動使用體驗。在本文中，我們將會介紹幾個最常用的Widget。

按鈕

按鈕是 jQuery Mobile Widget 中最基本的組件之一。我們可以通過 data-role="button" 屬性來創(chuàng)建一個按鈕。

<a href="#" data-role="button"> 普通按鈕 </a>

此外，還有一些其他的按鈕樣式，如圓角按鈕和陰影按鈕。我們只需在data-role中加入對應(yīng)的屬性即可。

<a href="#" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" 
data-theme="c" class="ui-btn ui-corner-all ui-shadow ui-btn-hover-c ui-btn-up-c">圓角、帶陰影的按鈕</a>

表單元素

在移動應(yīng)用開發(fā)中，表單元素非常常見。jQuery Mobile提供了統(tǒng)一的樣式來優(yōu)化表單元素。我們可以通過 data-role="fieldcontain" 來創(chuàng)建表單。

<div data-role="fieldcontain">
<label for="name">用戶名:</label>
<input type="text" name="name" id="name" value=""  />
</div>

此外，還有一些其他的表單元素類型，如下拉菜單，開關(guān)滑塊和復(fù)選框等。

導(dǎo)航欄

導(dǎo)航欄可以用來鏈接到應(yīng)用中的各個頁面。jQuery Mobile提供了兩種導(dǎo)航欄類型：固定和非固定。我們只需在 data-position="fixed" 加入對應(yīng)的屬性即可。

<header data-role="header" data-position="fixed">
<h1>My App</h1>
</header>

列表視圖

列表視圖是另一個常見的移動Web應(yīng)用組件。我們可以用 data-role="listview" 屬性來創(chuàng)建一個列表。

<ul data-role="listview" data-inset="true">
<li><a href="#">列表項 1</a></li>
<li><a href="#">列表項 2</a></li>
<li><a href="#">列表項 3</a></li>
</ul>

以上就是 jQuery Mobile 中最常用的 Widget。我們可以通過這些 Widget 來創(chuàng)建各種各樣的移動Web頁面來提供優(yōu)秀的用戶使用體驗。