CheckBox and Radio

CheckBox组件

支持从已有元素生成。

结构

<input type="checkbox" name="from-dom" title="从DOM生成" data-ui-type="CheckBox" />

change事件

使用change事件监听选中状态的变化。

结构
脚本

<input type="checkbox" title="打开高级功能" data-ui-type="CheckBox" data-ui-id="change-event" />
<p id="more-info">已经打开高级功能</p>

require('esui').get('change-event').on(
    'change',
    function () {
        if (this.isChecked()) {
            $('#more-info').show();
        }
        else {
            $('#more-info').hide();
        }
    }
);

选择框组

可将多个分为一组，使用boxType属性控制选择框类型，orientation属性控制排列方向。

结构
脚本

纵向排列

ER
ESUI
EF
Tangram

横向排列

ER
ESUI
EF
Tangram

change事件

ER
ESUI
EF
Tangram

已选值：

<div data-ui-type="BoxGroup" data-ui-id="box-group-vertical" 
    data-ui-name="frameworks" data-ui-box-type="radio"
    data-ui-orientation="vertical">
    <ul>
        <li>
            <input type="radio" id="framework-er" name="frameworks" value="er" />
            <label for="framework-er">ER</label>
        </li>
        <li>
            <input type="radio" id="framework-esui" name="frameworks" value="esui" checked="checked" />
            <label for="framework-esui">ESUI</label>
        </li>
        <li>
            <input type="radio" id="framework-ef" name="frameworks" value="ef" />
            <label for="framework-ef">EF</label>
        </li>
        <li>
            <input type="radio" id="framework-tangram" name="frameworks" value="tangram" />
            <label for="framework-tangram">Tangram</label>
        </li>
    </ul>
</div>

<div data-ui-type="BoxGroup" data-ui-id="box-group-horizontal" 
    data-ui-name="frameworks" data-ui-box-type="checkbox">
    <ul>
        <li>
            <input type="checkbox" id="framework-er" name="frameworks" value="er" />
            <label for="framework-er">ER</label>
        </li>
        <li>
            <input type="checkbox" id="framework-esui" name="frameworks" value="esui" />
            <label for="framework-esui">ESUI</label>
        </li>
        <li>
            <input type="checkbox" id="framework-ef" name="frameworks" value="ef" />
            <label for="framework-ef">EF</label>
        </li>
        <li>
            <input type="checkbox" id="framework-tangram" name="frameworks" value="tangram" />
            <label for="framework-tangram">Tangram</label>
        </li>
    </ul>
</div>

<div data-ui-type="BoxGroup" data-ui-id="box-group-change" 
    data-ui-name="frameworks" data-ui-box-type="checkbox">
    <ul>
        <li>
            <input type="checkbox" id="framework-er" name="frameworks" value="er" />
            <label for="framework-er">ER</label>
        </li>
        <li>
            <input type="checkbox" id="framework-esui" name="frameworks" value="esui" />
            <label for="framework-esui">ESUI</label>
        </li>
        <li>
            <input type="checkbox" id="framework-ef" name="frameworks" value="ef" />
            <label for="framework-ef">EF</label>
        </li>
        <li>
            <input type="checkbox" id="framework-tangram" name="frameworks" value="tangram" />
            <label for="framework-tangram">Tangram</label>
        </li>
    </ul>
</div>
<p id="box-group-change-log">已选值：</p>

require('esui').get('box-group-change').on(
    'change',
    function () {
        $('#box-group-change-log').text('已选值：' + this.getValue());
    }
);