Merge remote-tracking branch 'origin/2.x' into 2.x

pull/1260/head
sunxiaobin89 2 years ago
commit 61f1d64a97

@ -109,9 +109,12 @@ toc: true
<h2 id="on" lay-toc="{hot: true}">复选框事件</h2> <h2 id="on" lay-toc="{hot: true}">复选框事件</h2>
`form.on('checkbox(filter)', callback);` | 风格 | 事件 |
| --- | --- |
| 默认风格 / 标签风格 | `form.on('checkbox(filter)', callback);` |
| 开关风格 | `form.on('switch(filter)', callback);` |
- `checkbox` 为复选框事件固定名称 - `checkbox` `switch` 为复选框事件固定名称
- `filter` 为复选框元素对应的 `lay-filter` 属性值 - `filter` 为复选框元素对应的 `lay-filter` 属性值
该事件在复选框选中或取消选中时触发。 该事件在复选框选中或取消选中时触发。

@ -293,6 +293,7 @@
<input type="checkbox" name="like[write]" title="写作"> <input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读"> <input type="checkbox" name="like[read]" title="阅读">
<input type="checkbox" name="like[game]" title="游戏" disabled> <input type="checkbox" name="like[game]" title="游戏" disabled>
<input type="checkbox" name="like[indeterminate]" id="ID-indeterminate" lay-filter="filter-indeterminate" title="半选">
</div> </div>
</div> </div>
<div class="layui-form-item" pane> <div class="layui-form-item" pane>
@ -458,6 +459,10 @@
return false; return false;
}); });
// 设置半选
$('#ID-indeterminate').prop('indeterminate', true);
form.render('checkbox');
// 普通事件 // 普通事件
util.on('lay-on', { util.on('lay-on', {
"get-vercode": function(othis){ "get-vercode": function(othis){

@ -838,7 +838,7 @@ a cite{font-style: normal; *cursor:pointer;}
/* 复选框-默认风格 */ /* 复选框-默认风格 */
.layui-form-checkbox[lay-skin="primary"]{height: auto!important; line-height: normal!important; min-width: 18px; min-height: 18px; border: none!important; margin-right: 0; padding-left: 24px; padding-right: 0; background: none;} .layui-form-checkbox[lay-skin="primary"]{height: auto!important; line-height: normal!important; min-width: 18px; min-height: 18px; border: none!important; margin-right: 0; padding-left: 24px; padding-right: 0; background: none;}
.layui-form-checkbox[lay-skin="primary"] > div{margin-top: -1px; padding-left: 0; padding-right: 15px; line-height: 18px; background: none; color: #5F5F5F;} .layui-form-checkbox[lay-skin="primary"] > div{margin-top: -1px; padding-left: 0; padding-right: 15px; line-height: 18px; background: none; color: #5F5F5F;}
.layui-form-checkbox[lay-skin="primary"] > i{right: auto; left: 0; width: 16px; height: 16px; line-height: 16px; border: 1px solid #d2d2d2; font-size: 12px; border-radius: 2px; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;} .layui-form-checkbox[lay-skin="primary"] > i{right: auto; left: 0; width: 18px; height: 18px; line-height: 16px; border: 1px solid #d2d2d2; font-size: 12px; border-radius: 2px; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
.layui-form-checkbox[lay-skin="primary"]:hover > i{border-color: #16b777; color: #fff;} .layui-form-checkbox[lay-skin="primary"]:hover > i{border-color: #16b777; color: #fff;}
.layui-form-checked[lay-skin="primary"] > i{border-color: #16b777 !important; background-color: #16b777; color: #fff;} .layui-form-checked[lay-skin="primary"] > i{border-color: #16b777 !important; background-color: #16b777; color: #fff;}
.layui-checkbox-disabled[lay-skin="primary"] > div{background: none!important;} .layui-checkbox-disabled[lay-skin="primary"] > div{background: none!important;}
@ -849,7 +849,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-checkbox[lay-skin="primary"] > .layui-icon-indeterminate:before{content: ''; display: inline-block; vertical-align: middle; position: relative; width: 50%; height: 1px; margin: -1px auto 0; background-color: #16b777;} .layui-form-checkbox[lay-skin="primary"] > .layui-icon-indeterminate:before{content: ''; display: inline-block; vertical-align: middle; position: relative; width: 50%; height: 1px; margin: -1px auto 0; background-color: #16b777;}
/* 复选框-开关风格 */ /* 复选框-开关风格 */
.layui-form-switch{position: relative; display: inline-block; vertical-align: middle; height: 22px; line-height: 22px; min-width: 35px; padding: 0 5px; margin-top: 8px; border: 1px solid #d2d2d2; border-radius: 20px; cursor: pointer; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;} .layui-form-switch{position: relative; display: inline-block; vertical-align: middle; height: 24px; line-height: 22px; min-width: 44px; padding: 0 5px; margin-top: 8px; border: 1px solid #d2d2d2; border-radius: 20px; cursor: pointer; box-sizing: border-box; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
.layui-form-switch > i{position: absolute; left: 5px; top: 3px; width: 16px; height: 16px; border-radius: 20px; background-color: #d2d2d2; -webkit-transition: .1s linear; transition: .1s linear;} .layui-form-switch > i{position: absolute; left: 5px; top: 3px; width: 16px; height: 16px; border-radius: 20px; background-color: #d2d2d2; -webkit-transition: .1s linear; transition: .1s linear;}
.layui-form-switch > div{position: relative; top: 0; margin-left: 21px; padding: 0!important; text-align: center!important; color: #999!important; font-style: normal!important; font-size: 12px;} .layui-form-switch > div{position: relative; top: 0; margin-left: 21px; padding: 0!important; text-align: center!important; color: #999!important; font-style: normal!important; font-size: 12px;}
.layui-form-onswitch{border-color: #16b777; background-color: #16b777;} .layui-form-onswitch{border-color: #16b777; background-color: #16b777;}

@ -658,7 +658,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 半选 // 半选
if (check[0].indeterminate) { if (check[0].indeterminate) {
check[0].indeterminate = false; check[0].indeterminate = false;
reElem.find(CLASS.SUBTRA).removeClass(CLASS.SUBTRA).addClass('layui-icon-ok') reElem.find('.'+ CLASS.SUBTRA).removeClass(CLASS.SUBTRA).addClass('layui-icon-ok');
} }
// 开关 // 开关

Loading…
Cancel
Save