一、开关
-
基本状态
<input type="checkbox" id="switch"><label class="ui-switch" for="switch"></label>
-
禁用状态
开关禁用：
<input type="checkbox" id="switch2" disabled><label class="ui-switch" for="switch2"></label> <input type="checkbox" id="switch3" checked disabled><label class="ui-switch" for="switch3"></label>
可以看到，开关空间本质上就是复选框，其UI状态变化(禁用态、选中态等变化)都是跟随复选框变化的。需要使用
<label>元素，for属性值与对应的复选框的id关联。
二、独立使用
如果无需兼容IE8，直接引入CSS即可：
<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Checkbox.css"> <link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Switch.css">
若要兼容IE8，还需要加载JS文件（jquery文件略）：
<script src="//qidian.gtimg.com/c/=/lulu/theme/peak/js/common/ui/Radio.js,/lulu/theme/peak/js/common/ui/Checkbox.js"></script>
JS放在页面底部，无需任何初始化。