jQuery Mobile是一款基于jQuery技術的開發框架，主要用于開發移動設備上的網站和應用程序。其中包括了很多的交互元素，比如按鈕、文本框、列表和切換開關等等。本文將著重介紹jQuery Mobile中的切換開關組件。

<label for="flip-1">切換開關</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">關</option>
<option value="on">開</option>
</select>

上述代碼實現了一個簡單的切換開關，其中標簽<label>與切換開關相關聯，為切換開關添加了語義化和可訪問性（Accessibility）。變量<select>是帶有屬性data-role="slider"的，表示這是一個切換開關的組件。在切換開關組件內，我們可以添加<option>元素。這些元素可以包含激活切換開關所需要的文本與值。

一旦用戶進行了開關的操作，表單存儲的值將被自動修改為用戶所選的選項。如下代碼所示，將返回"on"或"off"：

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

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

• data-mini="true"將創建小型的開關。
• data-track-theme="a"將修改開關軌道的主題。
• data-theme="a"將定義開關的主題。
• data-wrapper-class="custom-class"將為開關添加一個自定義的class。
• data-off-text="no"和data-on-text="yes"將設置開關的文本到自定義字符串。

通過使用外觀屬性，開發人員可以簡單地根據他們的設計參考來自定義切換開關。例如：

<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>

上述代碼將為我們創建一個迷你型的開關，使用黑色主題a的色調顏色，白色主題b，同時定制了開關開和關的文本。使用簡單的方法，我們可以高度個性化并且簡化我們的代碼。