本文僅介紹使用方法，後續再介紹實現方案及優劣對比。

jquerymobile

jqm可以使用checkbox和select模擬switch控制元件，只需要增加data-role=‘flipswitch’即可；
預設開關控制元件：

<input type="checkbox" data-role="flipswitch" />

若要變為選中狀態，只需要增加一個checked屬性即可，如下：

<input type="checkbox" data-role="flipswitch" checked=“">

jqm支援自定義開關文字，使用data-on-text設定選中狀態文字，data-off-text設定關閉狀態文字，例如：

<input type="checkbox" data-role="flipswitch" data-on-text='開啟' data-off-text='關閉'>

若想使用select模擬，也很容易，如下程式碼：

<select id="flip-select" name="flip-select" data-role="flipswitch">
        <option>Off</option>
        <option>On</option>
</select>

預設顯示第一個option的狀態，若要顯示第二個選項狀態，只需在第二個選項上新增selected選項即可，如下：

<select id="flip-select" name="flip-select" data-role="flipswitch">
        	<option>Off</option>
        	<option selected=''>On</option>
    	</select>

jqm執行截圖如下：

bootstrap

bootstrap框架自身雖未提供switch控制元件，但其豐富的外掛體系必然會提供，這裡簡單介紹一款（http://www.bootstrap-switch.org/

），雖然我覺得稍顯複雜，因為還需要js干預；

html程式碼很簡單，寫一個checkbox即可：

<input type="checkbox" id='switch' checked />

接下來需要執行如下js程式碼：

$("#switch").bootstrapSwitch();

效果圖如下：

ratchet

ratchet通過2個div模擬開關，如下程式碼：

<div class="toggle">
	<div class="toggle-handle"></div>
</div>

其中，toggle-handle主要負責圓形滑塊的實現；

若要表示選中狀態，只需要在父div上增加一個active類即可，如下：

<div class="toggle active">
	<div class="toggle-handle"></div>
</div>

ratchet執行效果圖如下：

framework 7

f7框架將開關控制元件封裝在一個label中，如下程式碼：

<label class="label-switch">
<span style="white-space:pre">	</span><input type="checkbox" />
<span style="white-space:pre">	</span><div class="checkbox"></div>
</label>

若要表示選中狀態，只需要在input節點上增加checked屬性即可

f7的ui效果和ratchet一樣。

MUI

MUI是DCloud公司今年剛剛釋出的一款前端開源框架，MUI官網地址：http://dcloudio.github.com/mui，開關控制元件在mui中的使用方式類似ratchet，也是通過兩個div來模擬，程式碼如下：

   <div class="mui-switch mui-active">
       <div class="mui-switch-handle"></div>
   </div>

執行效果如下：

更多關於開關的描述，參考：http://dcloudio.github.io/mui/components/#toggles