LuLu UI组件中文文档 » 单复选框

单复选框

一、模拟单复选框

  1. 单选框们

    <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="radio5" name="radio" disabled checked>
    <label for="radio5" class="ui-radio"></label><label for="radio5" class="ml10 mr30 f14">单选项5</label>
  2. 复选框们

    <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="checkbox5" name="checkbox" disabled checked>
    <label for="checkbox5" class="ui-checkbox"></label><label for="checkbox5" class="ml10 mr30 f14">复选项5</label>
  3. 如何使用?

    基本上,就拷贝上面的HTML代码到项目中,就可以了,比传统元素控件就多了个label元素(.ui-radio/.ui-checkbox的那个label元素)而已。

    如果需要兼容IE8,则需要引入相关JS,类似下面代码,直接引入即可。

    if (!window.addEventListener) {
        require.async('common/ui/Radio');
        require.async('common/ui/Checkbox');
    }

    而IE9+浏览器不需要任何JS。

  4. 实现原理

    IE9+使用CSS3选择器:checked伪类精准控制单复选框的状态。

    而IE7,IE8通过JS同步[checked]属性,配合属性选择器和相邻选择器实现效果,开发时候,只需要关心单选框、复选框本身就可以了,例如:

    $(radio).click(function() {});
    $(checkbox).click(function() {});

    唯一需要注意的,就是我们如果手动通过JS修改单复选框的checked状态(非点击行为修改),则我们需要对元素radio/checkbox元素使用$().propMatch()方法同步一下,propMatch翻译一下就是“属性匹配”的意思。

    如果引入了Enhance.js,亦可以使用$().refresh()刷新与匹配。

二、作为插件独立使用

如果不需要兼容IE8浏览器,直接引入CSS即可。单选框引入:

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Radio.css">

复选框引入:

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Checkbox.css">

如果需要兼容IE8浏览器,还需要加载JS文件(jquery文件略):

<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Radio.js"></script>
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Checkbox.js"></script>

直接加载就好了,无需任何初始化。

单独使用Demo演示

Fork Me 返回顶部