LuLu UI pure版中文文档 »

Fork Me

单复选框

作为插件单独使用

单选框引入:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Radio.css">

复选框引入:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Checkbox.css">

模拟单选框

常规使用

<input type="radio" id="radio1" name="radio">
<label for="radio1" class="ui-radio"></label><label for="radio1">单选项1</label>
<!-- .ui-radio元素是看到的单选框效果,需要紧跟在原生的radio控件的后面 -->

禁用效果

单选框禁用和原生单选框禁用方法一样,直接设置原生单选框的disabled属性即可:

<input type="radio" id="radio4" name="radioDisabled" disabled>
<label for="radio4" class="ui-radio"></label><label for="radio4">单选项4</label>
<input type="radio" id="radio5" name="radioDisabled" disabled checked>
<label for="radio5" class="ui-radio"></label><label for="radio5">单选项5</label>

模拟复选框

常规使用

<input type="checkbox" id="checkbox1" name="checkbox">
<label for="checkbox1" class="ui-checkbox"></label><label for="checkbox1">复选项1</label>
<!-- .ui-checkbox元素就是肉眼所见的模拟复选框,需要紧跟在原生的checkbox控件的后面 -->

禁用态

禁用效果直接在原生的复选框元素上disabled属性就可以了:

<input type="checkbox" id="checkbox4" name="checkbox" disabled><label for="checkbox4" class="ui-checkbox"></label><label for="checkbox4">复选项4</label>
<input type="checkbox" id="checkbox5" name="checkbox" disabled checked>
<label for="checkbox5" class="ui-checkbox"></label><label for="checkbox5">复选项5</label>

还原为原生态

如果希望某些场景还是使用原生的单复选框,可以使用类名.ui-visible,示意:

<input type="checkbox" id="checkbox6" class="ui-visible"><label for="checkbox5" class="mr30 f14">复选项6</label>

<input type="radio" id="radio6" class="ui-visible"><label for="radio6" class="ui-radio"></label><label for="radio6">单选框6</label>
本页贡献者:

zhangxinxu