jQuery Mobile是一款基于jQuery技術(shù)的開(kāi)發(fā)框架，主要用于開(kāi)發(fā)移動(dòng)設(shè)備上的網(wǎng)站和應(yīng)用程序。其中包括了很多的交互元素，比如按鈕、文本框、列表和切換開(kāi)關(guān)等等。本文將著重介紹jQuery Mobile中的切換開(kāi)關(guān)組件。

<label for="flip-1">切換開(kāi)關(guān)</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">關(guān)</option>
<option value="on">開(kāi)</option>
</select>

上述代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的切換開(kāi)關(guān)，其中標(biāo)簽<label>與切換開(kāi)關(guān)相關(guān)聯(lián)，為切換開(kāi)關(guān)添加了語(yǔ)義化和可訪問(wèn)性（Accessibility）。變量<select>是帶有屬性data-role="slider"的，表示這是一個(gè)切換開(kāi)關(guān)的組件。在切換開(kāi)關(guān)組件內(nèi)，我們可以添加<option>元素。這些元素可以包含激活切換開(kāi)關(guān)所需要的文本與值。

一旦用戶進(jìn)行了開(kāi)關(guān)的操作，表單存儲(chǔ)的值將被自動(dòng)修改為用戶所選的選項(xiàng)。如下代碼所示，將返回"on"或"off"：

var flip = $("#flip-1").val();
alert(flip); // 返回 "on" 或 "off"

除了data-role="slider"屬性之外，我們還可以使用其他屬性來(lái)控制開(kāi)關(guān)的風(fēng)格與靈活性。jQuery Mobile提供了一組data-*屬性，它們可以在不影響狀態(tài)顯示的情況下修改組件的行為。下面是可用的data-*屬性：

• data-mini="true"將創(chuàng)建小型的開(kāi)關(guān)。
• data-track-theme="a"將修改開(kāi)關(guān)軌道的主題。
• data-theme="a"將定義開(kāi)關(guān)的主題。
• data-wrapper-class="custom-class"將為開(kāi)關(guān)添加一個(gè)自定義的class。
• data-off-text="no"和data-on-text="yes"將設(shè)置開(kāi)關(guān)的文本到自定義字符串。

通過(guò)使用外觀屬性，開(kāi)發(fā)人員可以簡(jiǎn)單地根據(jù)他們的設(shè)計(jì)參考來(lái)自定義切換開(kāi)關(guān)。例如：

<select name="flip-1" id="flip-1" data-role="slider" data-mini="true" 
data-track-theme="a" data-theme="b">
<option value="off" data-off-text="no">OFF</option>
<option value="on" data-on-text="yes">ON</option>
</select>

上述代碼將為我們創(chuàng)建一個(gè)迷你型的開(kāi)關(guān)，使用黑色主題a的色調(diào)顏色，白色主題b，同時(shí)定制了開(kāi)關(guān)開(kāi)和關(guān)的文本。使用簡(jiǎn)單的方法，我們可以高度個(gè)性化并且簡(jiǎn)化我們的代碼。