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
属性控制排列方向。
- 结构
- 脚本
纵向排列
横向排列
change事件
已选值:
<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()); } );