LuLu UI组件中文文档 » 基于复选框的开关效果

基于复选框的开关效果

一、开关

  1. 基本状态

  2. 禁用状态

    开关禁用:

    <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放在页面底部,无需任何初始化。

单独使用Demo演示

Fork Me 返回顶部