首页 > 代码库 > 开关控件在主流前端框架中的使用方法
开关控件在主流前端框架中的使用方法
本文仅介绍使用方法,后续再介绍实现方案及优劣对比。
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>
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>
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属性即可
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。