From db5a6eaa6d040434ab69fc45e72ee91ab591b4b3 Mon Sep 17 00:00:00 2001 From: morning-star Date: Sat, 13 May 2023 21:34:21 +0800 Subject: [PATCH 01/12] =?UTF-8?q?color=20=E6=96=87=E6=A1=A3=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit color 文档优化 --- docs/color/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/color/index.md b/docs/color/index.md index 91fccd5b..2d9c8010 100644 --- a/docs/color/index.md +++ b/docs/color/index.md @@ -24,7 +24,7 @@ toc: true
-

#1e9fff

+

#1e9fff

经典蓝

@@ -38,7 +38,7 @@ Layui 选取以象征清新与包容的「蓝绿色」作为主色调，它介
-

#ff5722

+

#ff5722

错误 - Danger

@@ -70,7 +70,7 @@ Layui 选取以象征清新与包容的「蓝绿色」作为主色调，它介
-

#fafafa

+

#fafafa

@@ -136,4 +136,4 @@ Layui 的色调基础，除了前面提到的主辅中色之外，还建立在 ## 标语 -> 不热衷于视觉设计的开发者不是一个好作家。 —— 贤心 \ No newline at end of file +> 不热衷于视觉设计的开发者不是一个好作家。 —— 贤心 From 4e120efe29f78aefccde64b12ef249a9d8a6b29f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Sun, 14 May 2023 11:42:19 +0800 Subject: [PATCH 02/12] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20table=20=E5=BD=93=20?= =?UTF-8?q?`page`=20=E6=9C=AA=E5=BC=80=E5=90=AF=E4=B8=94=20`totalRow`=20?= =?UTF-8?q?=E5=BC=80=E5=90=AF=E6=97=B6=EF=BC=8C=E9=A1=B5=E8=84=9A=E5=87=BA?= =?UTF-8?q?=E7=8E=B0=E5=8F=8C=E5=BA=95=E7=BA=BF=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/table.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/modules/table.js b/src/modules/table.js index 1c8e42f1..9c8a70b8 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -1674,20 +1674,22 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ if(!height) return; - //减去列头区域的高度 - bodyHeight = parseFloat(height) - (that.layHeader.outerHeight() || 38) - 1; //此处的数字常量是为了防止容器处在隐藏区域无法获得高度的问题，暂时只对默认尺寸的表格做支持。 + // 减去列头区域的高度 --- 此处的数字常量是为了防止容器处在隐藏区域无法获得高度的问题，暂时只对默认尺寸的表格做支持。 + bodyHeight = parseFloat(height) - (that.layHeader.outerHeight() || 38) - ( + options.page ? 1 : 0 + ); - //减去工具栏的高度 + // 减去工具栏的高度 if(options.toolbar){ bodyHeight -= (that.layTool.outerHeight() || 50); } - //减去统计栏的高度 + // 减去统计栏的高度 if(options.totalRow){ bodyHeight -= (that.layTotal.outerHeight() || 40); } - //减去分页栏的高度 + // 减去分页栏的高度 if(options.page || options.pagebar){ bodyHeight -= (that.layPage.outerHeight() || 43); } From 82669c720ac97f11f63a98447c2bf60178190512 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Sun, 14 May 2023 11:42:44 +0800 Subject: [PATCH 03/12] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20table=20=E7=9A=84=20?= =?UTF-8?q?`tool,checkbox,radio`=20=E4=BA=8B=E4=BB=B6=E7=9A=84=20`obj.getC?= =?UTF-8?q?ol()`=20=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/table.js | 32 +++++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/src/modules/table.js b/src/modules/table.js index 9c8a70b8..e154f8f8 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -2142,11 +2142,13 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ // 复选框选择（替代元素的 click 事件） that.elem.on('click', 'input[name="layTableCheckbox"]+', function(){ - var checkbox = $(this).prev() - ,children = that.layBody.find('input[name="layTableCheckbox"]') - ,index = checkbox.parents('tr').eq(0).data('index') - ,checked = checkbox[0].checked - ,isAll = checkbox.attr('lay-filter') === 'layTableAllChoose'; + var othis = $(this); + var td = othis.closest('td'); + var checkbox = othis.prev(); + var children = that.layBody.find('input[name="layTableCheckbox"]'); + var index = checkbox.parents('tr').eq(0).data('index'); + var checked = checkbox[0].checked; + var isAll = checkbox.attr('lay-filter') === 'layTableAllChoose'; if(checkbox[0].disabled) return; @@ -2169,14 +2171,19 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ MOD_NAME, 'checkbox('+ filter +')', commonMember.call(checkbox[0], { checked: checked, - type: isAll ? 'all' : 'one' + type: isAll ? 'all' : 'one', + getCol: function(){ // 获取当前列的表头配置信息 + return that.col(td.data('key')); + } }) ); }); // 单选框选择 that.elem.on('click', 'input[lay-type="layTableRadio"]+', function(){ - var radio = $(this).prev(); + var othis = $(this); + var td = othis.closest('td'); + var radio = othis.prev(); var checked = radio[0].checked; var index = radio.parents('tr').eq(0).data('index'); @@ -2193,7 +2200,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ radio[0], MOD_NAME, 'radio('+ filter +')', commonMember.call(radio[0], { - checked: checked + checked: checked, + getCol: function(){ // 获取当前列的表头配置信息 + return that.col(td.data('key')); + } }) ); }); @@ -2373,6 +2383,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ // 行工具条操作事件 var toolFn = function(type){ var othis = $(this); + var td = othis.closest('td'); var index = othis.parents('tr').eq(0).data('index'); layui.event.call( @@ -2380,7 +2391,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ MOD_NAME, (type || 'tool') + '('+ filter +')', commonMember.call(this, { - event: othis.attr('lay-event') + event: othis.attr('lay-event'), + getCol: function(){ // 获取当前列的表头配置信息 + return that.col(td.data('key')); + } }) ); // 设置当前行选中样式 From d3ff3dcd12b9be9fc7348937d5069bb6e10144bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Sun, 14 May 2023 11:46:21 +0800 Subject: [PATCH 04/12] =?UTF-8?q?=E4=BC=98=E5=8C=96=20checkbox=20=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=85=88=E7=BA=A7=E3=80=81=E6=A0=87=E7=AD=BE?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E5=8F=8A=E8=BE=B9=E8=B7=9D=E7=AD=89?= =?UTF-8?q?=E7=BB=86=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/layui.css | 80 ++++++++++++++++++++++++++--------------------- 1 file changed, 44 insertions(+), 36 deletions(-) diff --git a/src/css/layui.css b/src/css/layui.css index 3bc83c72..64cf0b43 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -817,55 +817,63 @@ a cite{font-style: normal; *cursor:pointer;} .layui-select-disabled .layui-disabled{border-color: #eee !important;} .layui-select-disabled .layui-edge{border-top-color: #d2d2d2} -/* 复选框 */.layui-form-checkbox{position: relative; display: inline-block; vertical-align: middle; height: 30px; line-height: 30px; margin-right: 10px; padding-right: 30px; background-color: #fff; cursor: pointer; font-size: 0; -webkit-transition: .1s linear; transition: .1s linear; box-sizing: border-box;} +/* 复选框 */ +.layui-form-checkbox{position: relative; display: inline-block; vertical-align: middle; height: 30px; line-height: 30px; margin-right: 10px; padding-right: 30px; background-color: #fff; cursor: pointer; font-size: 0; -webkit-transition: .1s linear; transition: .1s linear; box-sizing: border-box;} .layui-form-checkbox:hover{} -.layui-form-checkbox *{display: inline-block; vertical-align: middle;} -.layui-form-checkbox span{padding: 0 10px; height: 100%; font-size: 14px; border-radius: 2px 0 0 2px; background-color: #d2d2d2; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} -.layui-form-checkbox:hover span{background-color: #c2c2c2;} -.layui-form-checkbox i{position: absolute; right: 0; top: 0; width: 30px; height: 100%; border: 1px solid #d2d2d2; border-left: none; border-radius: 0 2px 2px 0; color: #fff; color: rgba(255,255,255,0); font-size: 20px; text-align: center; box-sizing: border-box;} -.layui-form-checkbox:hover i{border-color: #c2c2c2; color: #c2c2c2;} -.layui-form-checked, .layui-form-checked:hover{border-color: #16b777;} -.layui-form-checked span, .layui-form-checked:hover span{background-color: #16b777;} -.layui-form-checked i, .layui-form-checked:hover i{color: #16b777;} +.layui-form-checkbox > *{display: inline-block; vertical-align: middle;} +.layui-form-checkbox > div{padding: 0 11px; height: 100%; font-size: 14px; border-radius: 2px 0 0 2px; background-color: #d2d2d2; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} +.layui-form-checkbox:hover > div{background-color: #c2c2c2;} +.layui-form-checkbox > i{position: absolute; right: 0; top: 0; width: 30px; height: 100%; border: 1px solid #d2d2d2; border-left: none; border-radius: 0 2px 2px 0; color: #fff; color: rgba(255,255,255,0); font-size: 20px; text-align: center; box-sizing: border-box;} +.layui-form-checkbox:hover > i{border-color: #c2c2c2; color: #c2c2c2;} +.layui-form-checked, +.layui-form-checked:hover{border-color: #16b777;} +.layui-form-checked > div, +.layui-form-checked:hover > div{background-color: #16b777;} +.layui-form-checked > i, +.layui-form-checked:hover > i{color: #16b777;} .layui-form-item .layui-form-checkbox{margin-top: 4px;} +.layui-form-checkbox.layui-checkbox-disabled > div{background-color: #eee !important;} +.layui-form *[lay-checkbox]{display: 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: 28px; padding-right: 0; background: none;} -.layui-form-checkbox[lay-skin="primary"] span{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"]:hover i{border-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"] span{background: none!important; color: #c2c2c2!important;} -.layui-form-checked.layui-checkbox-disabled[lay-skin="primary"] i{background: #eee!important; border-color: #eee!important;} -.layui-checkbox-disabled[lay-skin="primary"]:hover i{border-color: #d2d2d2;} +/* 复选框-默认风格 */ +.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"] > 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"]:hover > i{border-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-form-checked.layui-checkbox-disabled[lay-skin="primary"] > i{background: #eee!important; border-color: #eee!important;} +.layui-checkbox-disabled[lay-skin="primary"]:hover > i{border-color: #d2d2d2;} .layui-form-item .layui-form-checkbox[lay-skin="primary"]{margin-top: 10px;} -.layui-form-checkbox[lay-skin="primary"] .layui-icon-indeterminate{border-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-checkbox[lay-skin="primary"] > .layui-icon-indeterminate{border-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 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 em{position: relative; top: 0; width: 25px; margin-left: 21px; padding: 0!important; text-align: center!important; color: #999!important; font-style: normal!important; font-size: 12px;} +/* 复选框-开关风格 */ +.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 > 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-onswitch{border-color: #16b777; background-color: #16b777;} -.layui-form-onswitch i{left: 100%; margin-left: -21px; background-color: #fff;} -.layui-form-onswitch em{margin-left: 0; margin-right: 21px; color: #fff!important;} +.layui-form-onswitch > i{left: 100%; margin-left: -21px; background-color: #fff;} +.layui-form-onswitch > div{margin-left: 0; margin-right: 21px; color: #fff!important;} .layui-checkbox-disabled{border-color: #eee !important;} -.layui-checkbox-disabled span{background-color: #eee !important;} -.layui-checkbox-disabled i{border-color: #eee !important;} -.layui-checkbox-disabled em{color: #d2d2d2 !important;} -.layui-checkbox-disabled:hover i{color: #fff !important;} +.layui-checkbox-disabled > div{color: #c2c2c2!important;} +.layui-checkbox-disabled > i{border-color: #eee !important;} +.layui-checkbox-disabled:hover > i{color: #fff !important;} /* 单选框 */ -*[lay-radio]{display: none;} .layui-form-radio{display: inline-block; vertical-align: middle; line-height: 28px; margin: 6px 10px 0 0; padding-right: 10px; cursor: pointer; font-size: 0;} -.layui-form-radio *{display: inline-block; vertical-align: middle; font-size: 14px;} -.layui-form-radio>i{margin-right: 8px; font-size: 22px; color: #c2c2c2;} +.layui-form-radio > *{display: inline-block; vertical-align: middle; font-size: 14px;} +.layui-form-radio > i{margin-right: 8px; font-size: 22px; color: #c2c2c2;} .layui-form-radioed, -.layui-form-radioed>i, -.layui-form-radio:hover *{color: #16b777;} -.layui-radio-disabled>i{color: #eee !important;} -.layui-radio-disabled *{color: #c2c2c2!important;} +.layui-form-radioed > i, +.layui-form-radio:hover > *{color: #16b777;} +.layui-radio-disabled > i{color: #eee !important;} +.layui-radio-disabled > *{color: #c2c2c2!important;} +.layui-form *[lay-radio]{display: none;} -/* 表单方框风格 */.layui-form-pane .layui-form-label{width: 110px; padding: 8px 15px; height: 38px; line-height: 20px; border-width: 1px; border-style: solid; border-radius: 2px 0 0 2px; text-align: center; background-color: #fafafa; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box;} +/* 表单方框风格 */ +.layui-form-pane .layui-form-label{width: 110px; padding: 8px 15px; height: 38px; line-height: 20px; border-width: 1px; border-style: solid; border-radius: 2px 0 0 2px; text-align: center; background-color: #fafafa; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box;} .layui-form-pane .layui-input-inline{margin-left: -1px;} .layui-form-pane .layui-input-block{margin-left: 110px; left: -1px;} .layui-form-pane .layui-input{border-radius: 0 2px 2px 0;} From 68a9ab79996c0b0406f54990833b204b24173aaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Sun, 14 May 2023 11:47:13 +0800 Subject: [PATCH 05/12] =?UTF-8?q?=E4=BC=98=E5=8C=96=20form=20=E4=B8=AD?= =?UTF-8?q?=E5=86=85=E7=BD=AE=E9=AA=8C=E8=AF=81=E8=A7=84=E5=88=99=E7=9A=84?= =?UTF-8?q?=E9=80=97=E5=8F=B7=E9=A3=8E=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/form.js | 53 +++++++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/src/modules/form.js b/src/modules/form.js index 1ce93847..08aa3a12 100644 --- a/src/modules/form.js +++ b/src/modules/form.js @@ -16,36 +16,37 @@ layui.define(['lay', 'layer', 'util'], function(exports){ var Form = function(){ this.config = { + // 内置的验证规则 verify: { required: [ - /[\S]+/ - ,'必填项不能为空' - ] - ,phone: [ - /^1\d{10}$/ - ,'请输入正确的手机号' - ] - ,email: [ - /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ - ,'邮箱格式不正确' - ] - ,url: [ - /^(#|(http(s?)):\/\/|\/\/)[^\s]+\.[^\s]+$/ - ,'链接格式不正确' - ] - ,number: function(value){ + /[\S]+/, + '必填项不能为空' + ], + phone: [ + /^1\d{10}$/, + '请输入正确的手机号' + ], + email: [ + /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, + '邮箱格式不正确' + ], + url: [ + /^(#|(http(s?)):\/\/|\/\/)[^\s]+\.[^\s]+$/, + '链接格式不正确' + ], + number: function(value){ if(!value || isNaN(value)) return '只能填写数字' - } - ,date: [ - /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/ - ,'日期格式不正确' + }, + date: [ + /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, + '日期格式不正确' + ], + identity: [ + /(^\d{15}$)|(^\d{17}(x|X|\d)$)/, + '请输入正确的身份证号' ] - ,identity: [ - /(^\d{15}$)|(^\d{17}(x|X|\d)$)/ - ,'请输入正确的身份证号' - ] - } - ,autocomplete: null // 全局 autocomplete 状态。null 表示不干预 + }, + autocomplete: null // 全局 autocomplete 状态。 null 表示不干预 }; }; From aee96eb65d578d9bc9c8170ee08f098f197d5cd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Sun, 14 May 2023 11:49:27 +0800 Subject: [PATCH 06/12] =?UTF-8?q?=E4=BC=98=E5=8C=96=20radio=20=E7=9A=84?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E7=94=B1=20`unicode`=20=E6=94=B9=E4=B8=BA=20?= =?UTF-8?q?`fontclass`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/form.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/modules/form.js b/src/modules/form.js index 08aa3a12..6b5c512f 100644 --- a/src/modules/form.js +++ b/src/modules/form.js @@ -715,11 +715,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){ // 单选框 ,radio: function(elem){ - var CLASS = 'layui-form-radio', ICON = ['', ''] - ,radios = elem || elemForm.find('input[type=radio]') + var CLASS = 'layui-form-radio'; + var ICON = ['layui-icon-radio', 'layui-icon-circle']; + var radios = elem || elemForm.find('input[type=radio]'); - ,events = function(reElem){ - var radio = $(this), ANIM = 'layui-anim-scaleSpring'; + // 事件 + var events = function(reElem){ + var radio = $(this); + var ANIM = 'layui-anim-scaleSpring'; reElem.on('click', function(){ var name = radio[0].name, forms = radio.parents(ELEM); From aeb16273ae03fbe2ab9d58c618da8bb849bb882d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Sun, 14 May 2023 11:49:55 +0800 Subject: [PATCH 07/12] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20checkbox=20=E7=9A=84?= =?UTF-8?q?=E6=A0=87=E9=A2=98=E6=A8=A1=E6=9D=BF=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/form.js | 107 ++++++++++++++++++++++++++------------------ 1 file changed, 63 insertions(+), 44 deletions(-) diff --git a/src/modules/form.js b/src/modules/form.js index 6b5c512f..6cc5ff14 100644 --- a/src/modules/form.js +++ b/src/modules/form.js @@ -640,29 +640,43 @@ layui.define(['lay', 'layer', 'util'], function(exports){ // 勾选 reElem.on('click', function(){ + var othis = $(this); var filter = check.attr('lay-filter') // 获取过滤器 - var title = (check.attr('title')||'').split('|'); + var title = ( + othis.next('*[lay-checkbox]')[0] + ? othis.next().html() + : check.attr('title') || '' + ); + var skin = check.attr('lay-skin') || 'primary'; + // 开关 + title = skin === 'switch' ? title.split('|') : [title]; + + // 禁用 if(check[0].disabled) return; + // 半选 if (check[0].indeterminate) { check[0].indeterminate = false; reElem.find(CLASS.SUBTRA).removeClass(CLASS.SUBTRA).addClass('layui-icon-ok') } - + // 开关 check[0].checked ? ( - check[0].checked = false - ,reElem.removeClass(RE_CLASS[1]).find('em').text(title[1]) + check[0].checked = false, + reElem.removeClass(RE_CLASS[1]), + skin === 'switch' && reElem.children('div').html(title[1]) ) : ( - check[0].checked = true - ,reElem.addClass(RE_CLASS[1]).find('em').text(title[0]) + check[0].checked = true, + reElem.addClass(RE_CLASS[1]), + skin === 'switch' && reElem.children('div').html(title[0]) ); + // 事件 layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', { - elem: check[0] - ,value: check[0].value - ,othis: reElem + elem: check[0], + value: check[0].value, + othis: reElem }); }); }; @@ -671,11 +685,16 @@ layui.define(['lay', 'layer', 'util'], function(exports){ checks.each(function(index, check){ var othis = $(this); var skin = othis.attr('lay-skin') || 'primary'; - var title = $.trim(check.title || function(){ // 向下兼容 lay-text 属性 + var title = util.escape($.trim(check.title || function(){ // 向下兼容 lay-text 属性 return check.title = othis.attr('lay-text') || ''; - }()); + }())); var disabled = this.disabled; + // 若存在标题模板，则优先读取标题模板 + if(othis.next('[lay-checkbox]')[0]){ + title = othis.next().html() || ''; + } + // 若为开关，则对 title 进行分隔解析 title = skin === 'switch' ? title.split('|') : [title]; @@ -685,27 +704,26 @@ layui.define(['lay', 'layer', 'util'], function(exports){ if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); // 替代元素 - var hasRender = othis.next('.' + RE_CLASS[0]) - ,reElem = $(['
' - ,function(){ // 不同风格的内容 + var hasRender = othis.next('.' + RE_CLASS[0]); + var reElem = $(['
', + function(){ // 不同风格的内容 var type = { // 复选框 "checkbox": [ - (title[0] ? (''+ util.escape(title[0]) +'') : '') - ,'' + (title[0] ? ('
'+ title[0] +'
') : (skin === 'primary' ? '' : '
')), + '' ].join(''), - // 开关 - "switch": ''+ ((check.checked ? title[0] : title[1]) || '') +'' + "switch": '
'+ ((check.checked ? title[0] : title[1]) || '') +'
' }; return type[skin] || type['checkbox']; - }() - ,'
'].join('')); + }(), + '
'].join('')); hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender othis.after(reElem); @@ -732,44 +750,45 @@ layui.define(['lay', 'layer', 'util'], function(exports){ if(radio[0].disabled) return; layui.each(sameRadio, function(){ - var next = $(this).next('.'+CLASS); + var next = $(this).next('.' + CLASS); this.checked = false; - next.removeClass(CLASS+'ed'); - next.find('.layui-icon').removeClass(ANIM).html(ICON[1]); + next.removeClass(CLASS + 'ed'); + next.find('.layui-icon').removeClass(ANIM + ' ' + ICON[0]).addClass(ICON[1]); }); radio[0].checked = true; - reElem.addClass(CLASS+'ed'); - reElem.find('.layui-icon').addClass(ANIM).html(ICON[0]); + reElem.addClass(CLASS + 'ed'); + reElem.find('.layui-icon').addClass(ANIM + ' ' + ICON[0]); layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', { - elem: radio[0] - ,value: radio[0].value - ,othis: reElem + elem: radio[0], + value: radio[0].value, + othis: reElem }); }); }; + // 初始渲染 radios.each(function(index, radio){ - var othis = $(this), hasRender = othis.next('.' + CLASS), disabled = this.disabled; + var othis = $(this), hasRender = othis.next('.' + CLASS); + var disabled = this.disabled; if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender // 替代元素 - var reElem = $(['
' // 禁用状态 - ,''+ ICON[radio.checked ? 0 : 1] +'' - ,'
'+ function(){ + var reElem = $(['
', // 禁用状态 + '', + '
'+ function(){ var title = util.escape(radio.title || ''); - if(typeof othis.next().attr('lay-radio') === 'string'){ + if(othis.next('[lay-radio]')[0]){ title = othis.next().html(); - // othis.next().remove(); } - return title - }() +'
' - ,'
'].join('')); + return title; + }() +'
', + '
'].join('')); othis.after(reElem); events.call(this, reElem); From 039e3bf30d3c4e8a6b0a6bbeaec14277b7239b8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Sun, 14 May 2023 12:38:21 +0800 Subject: [PATCH 08/12] =?UTF-8?q?=E8=B0=83=E6=95=B4=20form=20=E5=86=85?= =?UTF-8?q?=E7=BD=AE=E6=A0=A1=E9=AA=8C=E8=A7=84=E5=88=99=EF=BC=8C=E4=BB=85?= =?UTF-8?q?=E5=BD=93=E9=9D=9E=E7=A9=BA=E6=97=B6=E8=BF=9B=E8=A1=8C=E6=A0=A1?= =?UTF-8?q?=E9=AA=8C=EF=BC=8C=E9=81=BF=E5=85=8D=E5=BC=BA=E5=88=B6=E6=90=BA?= =?UTF-8?q?=E5=B8=A6=E5=BF=85=E5=A1=AB(`required`)=E7=9A=84=E6=A0=A1?= =?UTF-8?q?=E9=AA=8C=E8=A7=84=E5=88=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/form.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/modules/form.js b/src/modules/form.js index 6cc5ff14..41428288 100644 --- a/src/modules/form.js +++ b/src/modules/form.js @@ -35,7 +35,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){ '链接格式不正确' ], number: function(value){ - if(!value || isNaN(value)) return '只能填写数字' + if(isNaN(value)) return '只能填写数字'; }, date: [ /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, @@ -861,7 +861,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){ var verifyStr = othis.attr('lay-verify') || ''; var vers = verifyStr.split('|'); var verType = othis.attr('lay-vertype'); // 提示方式 - var value = othis.val(); + var value = $.trim(othis.val()); othis.removeClass(DANGER); // 移除警示样式 @@ -884,12 +884,13 @@ layui.define(['lay', 'layer', 'util'], function(exports){ errorText = errorText || rule[1]; + // 获取自定义必填项提示文本 if(thisVer === 'required'){ errorText = othis.attr('lay-reqtext') || errorText; } // 若为必填项或者非空命中校验，则阻止提交，弹出提示 - if(isTrue){ + if(isTrue && (thisVer === 'required' || (value && thisVer !== 'required'))){ // 提示层风格 if(verType === 'tips'){ layer.tips(errorText, function(){ @@ -904,7 +905,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){ layer.alert(errorText, {title: '提示', shadeClose: true}); } // 若返回的为字符或数字，则自动弹出默认提示框；否则由 verify 方法中处理提示 - else if(/\bstring|number\b/.test(typeof errorText)){ + else if(/\b(string|number)\b/.test(typeof errorText)){ layer.msg(errorText, {icon: 5, shift: 6}); } From aca0231473a92a366d315b98fb5947790a631a02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Sun, 14 May 2023 15:41:01 +0800 Subject: [PATCH 09/12] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20`layer.min(index)`?= =?UTF-8?q?=20=E6=96=B9=E6=B3=95=E4=B8=8E=E6=9C=80=E5=B0=8F=E5=8C=96?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E4=BA=8B=E4=BB=B6=E6=95=88=E6=9E=9C=E4=B8=8D?= =?UTF-8?q?=E4=B8=80=E8=87=B4=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/layer.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/modules/layer.js b/src/modules/layer.js index 5c93b853..6cdddc40 100644 --- a/src/modules/layer.js +++ b/src/modules/layer.js @@ -1025,8 +1025,6 @@ layer.style = function(index, options, limit){ // 最小化 layer.min = function(index, options){ - options = options || {}; - var layero = $('#'+ doms[0] + index); var maxminStatus = layero.data('maxminStatus'); @@ -1034,8 +1032,10 @@ layer.min = function(index, options){ if(maxminStatus === 'max') layer.restore(index); // 若当前为最大化，则先还原后再最小化 layero.data('maxminStatus', 'min'); + options = options || layero.data('config') || {}; var shadeo = $('#'+ doms.SHADE + index); + var elemMin = layero.find('.layui-layer-min'); var titHeight = layero.find(doms[1]).outerHeight() || 0; var minLeft = layero.attr('minLeft'); // 最小化时的横坐标 var hasMinLeft = typeof minLeft === 'string'; // 是否已经赋值过最小化坐标 @@ -1077,7 +1077,7 @@ layer.min = function(index, options){ layero.attr('position', position); layer.style(index, settings, true); - layero.find('.layui-layer-min').hide(); + elemMin.hide(); layero.attr('type') === 'page' && layero.find(doms[4]).hide(); ready.rescollbar(index); From cb9d9d4acd622c50343f3d593fcbfe7ec600c341 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Sun, 14 May 2023 15:47:17 +0800 Subject: [PATCH 10/12] =?UTF-8?q?=E4=BC=98=E5=8C=96=20layer=20=E5=86=85?= =?UTF-8?q?=E9=83=A8=E7=9A=84=E5=B1=9E=E6=80=A7=E9=85=8D=E7=BD=AE=E8=AE=B0?= =?UTF-8?q?=E5=BD=95=EF=BC=8C=E7=BB=9F=E4=B8=80=E4=B8=B4=E6=97=B6=E8=AE=B0?= =?UTF-8?q?=E5=BD=95=E5=9C=A8=E5=AE=B9=E5=99=A8=20jQuery.data=20=E7=9A=84?= =?UTF-8?q?=20`config`=20=E4=B8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/layer.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/modules/layer.js b/src/modules/layer.js index 6cdddc40..fafecc99 100644 --- a/src/modules/layer.js +++ b/src/modules/layer.js @@ -500,13 +500,8 @@ Class.pt.creat = function(){ }); }; - // 记录关闭动画 - if(config.isOutAnim){ - that.layero.data({ - isOutAnim: true, - anim: config.anim - }); - } + // 记录配置信息 + that.layero.data('config', config); }; // 当前实例的 resize 事件 @@ -1157,7 +1152,7 @@ layer.close = function(index, callback){ ) : $('#'+ doms[0] + index) }(); var type = layero.attr('type'); - var data = layero.data() || {}; + var options = layero.data('config') || {}; // 关闭动画 var closeAnim = ({ @@ -1165,7 +1160,7 @@ layer.close = function(index, callback){ slideLeft: 'layer-anim-slide-left-out', slideUp: 'layer-anim-slide-up-out', slideRight: 'layer-anim-slide-right-out' - })[data.anim] || 'layer-anim-close'; + })[options.anim] || 'layer-anim-close'; if(!layero[0]) return; @@ -1203,7 +1198,7 @@ layer.close = function(index, callback){ }; // 是否允许关闭动画 - if(data.isOutAnim){ + if(options.isOutAnim){ layero.addClass('layer-anim '+ closeAnim); } @@ -1217,7 +1212,7 @@ layer.close = function(index, callback){ ready.minStackArr.push(layero.attr('minLeft')); } - if((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')){ + if((layer.ie && layer.ie < 10) || !options.isOutAnim){ remove() } else { setTimeout(function(){ From 81bab8942f4fc370bf4116712412c25f092a1cd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Sun, 14 May 2023 19:32:06 +0800 Subject: [PATCH 11/12] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20layer=20=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/layer.html | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/examples/layer.html b/examples/layer.html index 3305852d..78ee296e 100644 --- a/examples/layer.html +++ b/examples/layer.html @@ -145,8 +145,8 @@ layui.use(['layer', 'util'], function(layer, util){ content: $('#test11111'), maxmin: true, shade: false, - minStack: false, //最小化不堆叠在左下角 - id: 'page1', //定义 ID，防止重复弹出 + minStack: false, // 最小化不堆叠在左下角 + id: 'page-1', // 定义 ID，防止重复弹出 min: function(layero, index){ layer.msg('阻止了默认的最小化'); layer.style(index, {top: 'auto', bottom: 0}); @@ -156,10 +156,12 @@ layui.use(['layer', 'util'], function(layer, util){ } ,test6: function(){ layer.open({ - type: 2 - ,content: 'https://www.aliyun.com/activity?userCode=ap0255is' - ,area: ['375px', '500px'] - ,maxmin: true + type: 2, + content: 'https://www.aliyun.com/activity?userCode=ap0255is', + area: ['375px', '500px'], + id: 'iframe-1', + hideOnClose: true, // 关闭时是否隐藏弹层容器，下次打开时直接显示原来的弹层 + maxmin: true }); } ,testLoading: function(){ From 4bf2fccafc1813d92c93d8830762c4a483d480a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Sun, 14 May 2023 19:32:36 +0800 Subject: [PATCH 12/12] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20layer=20=E7=9A=84=20?= =?UTF-8?q?`hideOnClose`=20=E5=B1=9E=E6=80=A7=EF=BC=8C=E7=94=A8=E4=BA=8E?= =?UTF-8?q?=E5=85=B3=E9=97=AD=E6=97=B6=E6=98=AF=E5=90=A6=E9=9A=90=E8=97=8F?= =?UTF-8?q?=E5=BC=B9=E5=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/layer.js | 78 ++++++++++++++++++++++++++++++++------------ 1 file changed, 57 insertions(+), 21 deletions(-) diff --git a/src/modules/layer.js b/src/modules/layer.js index fafecc99..1acb6934 100644 --- a/src/modules/layer.js +++ b/src/modules/layer.js @@ -255,7 +255,7 @@ doms.anim = { doms.SHADE = 'layui-layer-shade'; doms.MOVE = 'layui-layer-move'; -//默认配置 +// 默认配置 Class.pt.config = { type: 0, shade: 0.3, @@ -265,16 +265,16 @@ Class.pt.config = { offset: 'auto', area: 'auto', closeBtn: 1, - time: 0, //0表示不自动关闭 + icon: -1, + time: 0, // 0 表示不自动关闭 zIndex: 19891014, maxWidth: 360, anim: 0, - isOutAnim: true, //退出动画 - minStack: true, //最小化堆叠 - icon: -1, + isOutAnim: true, // 退出动画 + minStack: true, // 最小化堆叠 moveType: 1, resize: true, - scrollbar: true, //是否允许浏览器滚动条 + scrollbar: true, // 是否允许浏览器滚动条 tips: 2 }; @@ -382,25 +382,45 @@ Class.pt.vessel = function(conType, callback){ return that; }; -//创建骨架 +// 创建骨架 Class.pt.creat = function(){ - var that = this - ,config = that.config - ,times = that.index, nodeIndex - ,content = config.content - ,conType = typeof content === 'object' - ,body = $('body'); + var that = this; + var config = that.config; + var times = that.index, nodeIndex; + var content = config.content; + var conType = typeof content === 'object'; + var body = $('body'); - if(config.id && $('.'+ doms[0]).find('#'+ config.id)[0]) return; + // 若 id 对应的弹层已经存在，则不重新创建 + if(config.id && $('.'+ doms[0]).find('#'+ config.id)[0]){ + return (function(){ + var layero = $('#'+ config.id).closest('.'+ doms[0]); + var index = layero.attr('times'); + var options = layero.data('config'); + var elemShade = $('#'+ doms.SHADE + index); + + var maxminStatus = layero.data('maxminStatus') || {}; + // 若弹层为最小化状态，则点击目标元素时，自动还原 + if(maxminStatus === 'min'){ + layer.restore(index); + } else if(options.hideOnClose){ + elemShade.show(); + layero.show(); + }; + })(); + }; + + // 是否移除活动元素的焦点 if(config.removeFocus) { document.activeElement.blur(); // 将原始的聚焦节点失焦 } + // 初始化 area 属性 if(typeof config.area === 'string'){ config.area = config.area === 'auto' ? ['', ''] : [config.area, '']; } - //anim兼容旧版shift + // anim 兼容旧版 shift if(config.shift){ config.anim = config.shift; } @@ -1153,6 +1173,9 @@ layer.close = function(index, callback){ }(); var type = layero.attr('type'); var options = layero.data('config') || {}; + var hideOnClose = options.id && options.hideOnClose; // 是否关闭时移除弹层容器 + + if(!layero[0]) return; // 关闭动画 var closeAnim = ({ @@ -1161,10 +1184,18 @@ layer.close = function(index, callback){ slideUp: 'layer-anim-slide-up-out', slideRight: 'layer-anim-slide-right-out' })[options.anim] || 'layer-anim-close'; - - if(!layero[0]) return; - - var WRAP = 'layui-layer-wrap', remove = function(){ + + // 移除主容器 + var remove = function(){ + var WRAP = 'layui-layer-wrap'; + + // 是否关闭时隐藏弹层容器 + if(hideOnClose){ + layero.removeClass('layer-anim '+ closeAnim); + return layero.hide(); + } + + // 是否为页面捕获层 if(type === ready.type[1] && layero.attr('conType') === 'object'){ layero.children(':not(.'+ doms[5] +')').remove(); var wrap = layero.find('.'+WRAP); @@ -1173,7 +1204,7 @@ layer.close = function(index, callback){ } wrap.css('display', wrap.data('display')).removeClass(WRAP); } else { - //低版本IE 回收 iframe + // 低版本 IE 回收 iframe if(type === ready.type[2]){ try { var iframe = $('#'+ doms[4] + index)[0]; @@ -1196,13 +1227,18 @@ layer.close = function(index, callback){ delete ready.events.resize[index]; } }; + // 移除遮罩 + var removeShade = (function fn(){ + $('#'+ doms.SHADE + index)[ + hideOnClose ? 'hide' : 'remove' + ](); + })(); // 是否允许关闭动画 if(options.isOutAnim){ layero.addClass('layer-anim '+ closeAnim); } - $('#layui-layer-moves, #'+ doms.SHADE + index).remove(); layer.ie == 6 && ready.reselect(); ready.rescollbar(index);