开关控件在主流前端框架中的使用方法

标签：switch   jquerymobile   bootstrap   ratchet   js   

本文仅介绍使用方法，后续再介绍实现方案及优劣对比。

jquerymobile

jqm可以使用checkbox和select模拟switch控件，只需要增加data-role=‘flipswitch’即可；
默认开关控件：

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

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

<input type="checkbox" data-role="flipswitch" data-on-text='打开' data-off-text='关闭'>

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

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

bootstrap

bootstrap框架自身虽未提供switch控件，但其丰富的插件体系必然会提供，这里简单介绍一款（http://www.bootstrap-switch.org/），虽然我觉得稍显复杂，因为还需要js干预；

html代码很简单，写一个checkbox即可：

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

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

ratchet通过2个div模拟开关，如下代码：

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

若要表示选中状态，只需要在父div上增加一个active类即可，如下：

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

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>

开关控件在主流前端框架中的使用方法,布布扣,bubuko.com

开关控件在主流前端框架中的使用方法

标签：switch   jquerymobile   bootstrap   ratchet   js   

原文地址：http://blog.csdn.net/hbcui1984/article/details/38308685