github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'layui:2.x' into 2.x

pull/1252/head^2
sunxiaobin89 2023-05-15 02:13:06 +08:00 committed by GitHub
parent ae767a2722 4bf2fccafc
commit ba8098a50b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 254 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/color/index.md
View File

@ -24,7 +24,7 @@ toc: true
</div> </div>
<div class="layui-col-sm4"> <div class="layui-col-sm4">
<div class="layui-bg-blue"> <div class="layui-bg-blue">
<p>#1e9fff<p> <p>#1e9fff</p>
<p>经典蓝</p> <p>经典蓝</p>
</div> </div>
</div> </div>
@ -38,7 +38,7 @@ Layui 选取以象征清新与包容的「蓝绿色」作为主色调，它介
<div class="layui-row layui-col-space15 ws-docs-color"> <div class="layui-row layui-col-space15 ws-docs-color">
<div class="layui-col-sm3"> <div class="layui-col-sm3">
<div class="layui-bg-red"> <div class="layui-bg-red">
<p>#ff5722<p> <p>#ff5722</p>
<p>错误 - Danger</p> <p>错误 - Danger</p>
</div> </div>
</div> </div>
@ -70,7 +70,7 @@ Layui 选取以象征清新与包容的「蓝绿色」作为主色调，它介
<div class="layui-row ws-docs-color ws-docs-necolor"> <div class="layui-row ws-docs-color ws-docs-necolor">
<div class="layui-col-md6"> <div class="layui-col-md6">
<div style="background-color: #FAFAFA;"> <div style="background-color: #FAFAFA;">
<p>#fafafa<p> <p>#fafafa</p>
</div> </div>
</div> </div>
<div class="layui-col-md6"> <div class="layui-col-md6">

14
examples/layer.html
View File

@ -145,8 +145,8 @@ layui.use(['layer', 'util'], function(layer, util){
content: $('#test11111'), content: $('#test11111'),
maxmin: true, maxmin: true,
shade: false, shade: false,
minStack: false, //最小化不堆叠在左下角 minStack: false, // 最小化不堆叠在左下角
id: 'page1', //定义 ID，防止重复弹出 id: 'page-1', // 定义 ID，防止重复弹出
min: function(layero, index){ min: function(layero, index){
layer.msg('阻止了默认的最小化'); layer.msg('阻止了默认的最小化');
layer.style(index, {top: 'auto', bottom: 0}); layer.style(index, {top: 'auto', bottom: 0});
@ -156,10 +156,12 @@ layui.use(['layer', 'util'], function(layer, util){
} }
,test6: function(){ ,test6: function(){
layer.open({ layer.open({
type: 2 type: 2,
,content: 'https://www.aliyun.com/activity?userCode=ap0255is' content: 'https://www.aliyun.com/activity?userCode=ap0255is',
,area: ['375px', '500px'] area: ['375px', '500px'],
,maxmin: true id: 'iframe-1',
hideOnClose: true, // 关闭时是否隐藏弹层容器，下次打开时直接显示原来的弹层
maxmin: true
}); });
} }
,testLoading: function(){ ,testLoading: function(){

80
src/css/layui.css
View File

@ -817,55 +817,63 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-select-disabled .layui-disabled{border-color: #eee !important;} .layui-select-disabled .layui-disabled{border-color: #eee !important;}
.layui-select-disabled .layui-edge{border-top-color: #d2d2d2} .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:hover{}
.layui-form-checkbox *{display: inline-block; vertical-align: middle;} .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 > 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 span{background-color: #c2c2c2;} .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 > 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-checkbox:hover > i{border-color: #c2c2c2; color: #c2c2c2;}
.layui-form-checked, .layui-form-checked:hover{border-color: #16b777;} .layui-form-checked,
.layui-form-checked span, .layui-form-checked:hover span{background-color: #16b777;} .layui-form-checked:hover{border-color: #16b777;}
.layui-form-checked i, .layui-form-checked:hover i{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-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"]{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"] 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"] > div{margin-top: -1px; padding-left: 0; padding-right: 15px; line-height: 18px; background: none; color: #5F5F5F;}
.layui-form-checkbox[lay-skin="primary"]:hover i{border-color: #16b777; color: #fff;} .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-checked[lay-skin="primary"] i{border-color: #16b777 !important; background-color: #16b777; color: #fff;} .layui-form-checkbox[lay-skin="primary"]:hover > i{border-color: #16b777; color: #fff;}
.layui-checkbox-disabled[lay-skin="primary"] span{background: none!important; color: #c2c2c2!important;} .layui-form-checked[lay-skin="primary"] > i{border-color: #16b777 !important; background-color: #16b777; color: #fff;}
.layui-form-checked.layui-checkbox-disabled[lay-skin="primary"] i{background: #eee!important; border-color: #eee!important;} .layui-checkbox-disabled[lay-skin="primary"] > div{background: none!important;}
.layui-checkbox-disabled[lay-skin="primary"]:hover i{border-color: #d2d2d2;} .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-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{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: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{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 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 > 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{border-color: #16b777; background-color: #16b777;}
.layui-form-onswitch i{left: 100%; margin-left: -21px; background-color: #fff;} .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 > div{margin-left: 0; margin-right: 21px; color: #fff!important;}
.layui-checkbox-disabled{border-color: #eee !important;} .layui-checkbox-disabled{border-color: #eee !important;}
.layui-checkbox-disabled span{background-color: #eee !important;} .layui-checkbox-disabled > div{color: #c2c2c2!important;}
.layui-checkbox-disabled i{border-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: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; 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 > *{display: inline-block; vertical-align: middle; font-size: 14px;}
.layui-form-radio>i{margin-right: 8px; font-size: 22px; color: #c2c2c2;} .layui-form-radio > i{margin-right: 8px; font-size: 22px; color: #c2c2c2;}
.layui-form-radioed, .layui-form-radioed,
.layui-form-radioed>i, .layui-form-radioed > i,
.layui-form-radio:hover *{color: #16b777;} .layui-form-radio:hover > *{color: #16b777;}
.layui-radio-disabled>i{color: #eee !important;} .layui-radio-disabled > i{color: #eee !important;}
.layui-radio-disabled *{color: #c2c2c2!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-inline{margin-left: -1px;}
.layui-form-pane .layui-input-block{margin-left: 110px; left: -1px;} .layui-form-pane .layui-input-block{margin-left: 110px; left: -1px;}
.layui-form-pane .layui-input{border-radius: 0 2px 2px 0;} .layui-form-pane .layui-input{border-radius: 0 2px 2px 0;}

180
src/modules/form.js
View File

@ -16,36 +16,37 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var Form = function(){ var Form = function(){
this.config = { this.config = {
// 内置的验证规则
verify: { verify: {
required: [ required: [
/[\S]+/ /[\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(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]))*$/,
'日期格式不正确'
],
identity: [
/(^\d{15}$)|(^\d{17}(x|X|\d)$)/,
'请输入正确的身份证号'
] ]
,phone: [ },
/^1\d{10}$/ autocomplete: null // 全局 autocomplete 状态。 null 表示不干预
,'请输入正确的手机号'
]
,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]))*$/
,'日期格式不正确'
]
,identity: [
/(^\d{15}$)|(^\d{17}(x|X|\d)$)/
,'请输入正确的身份证号'
]
}
,autocomplete: null // 全局 autocomplete 状态。null 表示不干预
}; };
}; };
@ -639,29 +640,43 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 勾选 // 勾选
reElem.on('click', function(){ reElem.on('click', function(){
var othis = $(this);
var filter = check.attr('lay-filter') // 获取过滤器 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].disabled) return;
// 半选
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')
} }
// 开关
check[0].checked ? ( check[0].checked ? (
check[0].checked = false check[0].checked = false,
,reElem.removeClass(RE_CLASS[1]).find('em').text(title[1]) reElem.removeClass(RE_CLASS[1]),
skin === 'switch' && reElem.children('div').html(title[1])
) : ( ) : (
check[0].checked = true check[0].checked = true,
,reElem.addClass(RE_CLASS[1]).find('em').text(title[0]) reElem.addClass(RE_CLASS[1]),
skin === 'switch' && reElem.children('div').html(title[0])
); );
// 事件
layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', { layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', {
elem: check[0] elem: check[0],
,value: check[0].value value: check[0].value,
,othis: reElem othis: reElem
}); });
}); });
}; };
@ -670,11 +685,16 @@ layui.define(['lay', 'layer', 'util'], function(exports){
checks.each(function(index, check){ checks.each(function(index, check){
var othis = $(this); var othis = $(this);
var skin = othis.attr('lay-skin') || 'primary'; 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') || ''; return check.title = othis.attr('lay-text') || '';
}()); }()));
var disabled = this.disabled; var disabled = this.disabled;
// 若存在标题模板，则优先读取标题模板
if(othis.next('[lay-checkbox]')[0]){
title = othis.next().html() || '';
}
// 若为开关，则对 title 进行分隔解析 // 若为开关，则对 title 进行分隔解析
title = skin === 'switch' ? title.split('|') : [title]; title = skin === 'switch' ? title.split('|') : [title];
@ -684,27 +704,26 @@ layui.define(['lay', 'layer', 'util'], function(exports){
if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
// 替代元素 // 替代元素
var hasRender = othis.next('.' + RE_CLASS[0]) var hasRender = othis.next('.' + RE_CLASS[0]);
,reElem = $(['<div class="layui-unselect '+ RE_CLASS[0] var reElem = $(['<div class="layui-unselect '+ RE_CLASS[0],
,(check.checked ? (' '+ RE_CLASS[1]) : '') // 选中状态 (check.checked ? (' '+ RE_CLASS[1]) : ''), // 选中状态
,(disabled ? ' layui-checkbox-disabled '+ DISABLED : '') // 禁用状态 (disabled ? ' layui-checkbox-disabled '+ DISABLED : ''), // 禁用状态
,'"' '"',
,(skin ? ' lay-skin="'+ skin +'"' : '') // 风格 (skin ? ' lay-skin="'+ skin +'"' : ''), // 风格
,'>' '>',
,function(){ // 不同风格的内容 function(){ // 不同风格的内容
var type = { var type = {
// 复选框 // 复选框
"checkbox": [ "checkbox": [
(title[0] ? ('<span>'+ util.escape(title[0]) +'</span>') : '') (title[0] ? ('<div>'+ title[0] +'</div>') : (skin === 'primary' ? '' : '<div></div>')),
,'<i class="layui-icon '+(skin === 'primary' && !check.checked && othis.get(0).indeterminate ? CLASS.SUBTRA : 'layui-icon-ok')+'"></i>' '<i class="layui-icon '+(skin === 'primary' && !check.checked && othis.get(0).indeterminate ? CLASS.SUBTRA : 'layui-icon-ok')+'"></i>'
].join(''), ].join(''),
// 开关 // 开关
"switch": '<em>'+ ((check.checked ? title[0] : title[1]) || '') +'</em><i></i>' "switch": '<div>'+ ((check.checked ? title[0] : title[1]) || '') +'</div><i></i>'
}; };
return type[skin] || type['checkbox']; return type[skin] || type['checkbox'];
}() }(),
,'</div>'].join('')); '</div>'].join(''));
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
othis.after(reElem); othis.after(reElem);
@ -714,11 +733,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 单选框 // 单选框
,radio: function(elem){ ,radio: function(elem){
var CLASS = 'layui-form-radio', ICON = ['&#xe643;', '&#xe63f;'] var CLASS = 'layui-form-radio';
,radios = elem || elemForm.find('input[type=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(){ reElem.on('click', function(){
var name = radio[0].name, forms = radio.parents(ELEM); var name = radio[0].name, forms = radio.parents(ELEM);
@ -728,44 +750,45 @@ layui.define(['lay', 'layer', 'util'], function(exports){
if(radio[0].disabled) return; if(radio[0].disabled) return;
layui.each(sameRadio, function(){ layui.each(sameRadio, function(){
var next = $(this).next('.'+CLASS); var next = $(this).next('.' + CLASS);
this.checked = false; this.checked = false;
next.removeClass(CLASS+'ed'); next.removeClass(CLASS + 'ed');
next.find('.layui-icon').removeClass(ANIM).html(ICON[1]); next.find('.layui-icon').removeClass(ANIM + ' ' + ICON[0]).addClass(ICON[1]);
}); });
radio[0].checked = true; radio[0].checked = true;
reElem.addClass(CLASS+'ed'); reElem.addClass(CLASS + 'ed');
reElem.find('.layui-icon').addClass(ANIM).html(ICON[0]); reElem.find('.layui-icon').addClass(ANIM + ' ' + ICON[0]);
layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', { layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', {
elem: radio[0] elem: radio[0],
,value: radio[0].value value: radio[0].value,
,othis: reElem othis: reElem
}); });
}); });
}; };
// 初始渲染
radios.each(function(index, radio){ 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(); if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
// 替代元素 // 替代元素
var reElem = $(['<div class="layui-unselect '+ CLASS var reElem = $(['<div class="layui-unselect '+ CLASS,
,(radio.checked ? (' '+CLASS+'ed') : '') // 选中状态 (radio.checked ? (' '+ CLASS +'ed') : ''), // 选中状态
,(disabled ? ' layui-radio-disabled '+DISABLED : '') +'">' // 禁用状态 (disabled ? ' layui-radio-disabled '+DISABLED : '') +'">', // 禁用状态
,'<i class="layui-anim layui-icon">'+ ICON[radio.checked ? 0 : 1] +'</i>' '<i class="layui-anim layui-icon '+ ICON[radio.checked ? 0 : 1] +'"></i>',
,'<div>'+ function(){ '<div>'+ function(){
var title = util.escape(radio.title || ''); var title = util.escape(radio.title || '');
if(typeof othis.next().attr('lay-radio') === 'string'){ if(othis.next('[lay-radio]')[0]){
title = othis.next().html(); title = othis.next().html();
// othis.next().remove();
} }
return title return title;
}() +'</div>' }() +'</div>',
,'</div>'].join('')); '</div>'].join(''));
othis.after(reElem); othis.after(reElem);
events.call(this, reElem); events.call(this, reElem);
@ -838,7 +861,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var verifyStr = othis.attr('lay-verify') || ''; var verifyStr = othis.attr('lay-verify') || '';
var vers = verifyStr.split('|'); var vers = verifyStr.split('|');
var verType = othis.attr('lay-vertype'); // 提示方式 var verType = othis.attr('lay-vertype'); // 提示方式
var value = othis.val(); var value = $.trim(othis.val());
othis.removeClass(DANGER); // 移除警示样式 othis.removeClass(DANGER); // 移除警示样式
@ -861,12 +884,13 @@ layui.define(['lay', 'layer', 'util'], function(exports){
errorText = errorText || rule[1]; errorText = errorText || rule[1];
// 获取自定义必填项提示文本
if(thisVer === 'required'){ if(thisVer === 'required'){
errorText = othis.attr('lay-reqtext') || errorText; errorText = othis.attr('lay-reqtext') || errorText;
} }
// 若为必填项或者非空命中校验，则阻止提交，弹出提示 // 若为必填项或者非空命中校验，则阻止提交，弹出提示
if(isTrue){ if(isTrue && (thisVer === 'required' || (value && thisVer !== 'required'))){
// 提示层风格 // 提示层风格
if(verType === 'tips'){ if(verType === 'tips'){
layer.tips(errorText, function(){ layer.tips(errorText, function(){
@ -881,7 +905,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
layer.alert(errorText, {title: '提示', shadeClose: true}); layer.alert(errorText, {title: '提示', shadeClose: true});
} }
// 若返回的为字符或数字，则自动弹出默认提示框；否则由 verify 方法中处理提示 // 若返回的为字符或数字，则自动弹出默认提示框；否则由 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}); layer.msg(errorText, {icon: 5, shift: 6});
} }

97
src/modules/layer.js
View File

@ -255,7 +255,7 @@ doms.anim = {
doms.SHADE = 'layui-layer-shade'; doms.SHADE = 'layui-layer-shade';
doms.MOVE = 'layui-layer-move'; doms.MOVE = 'layui-layer-move';
//默认配置 // 默认配置
Class.pt.config = { Class.pt.config = {
type: 0, type: 0,
shade: 0.3, shade: 0.3,
@ -265,16 +265,16 @@ Class.pt.config = {
offset: 'auto', offset: 'auto',
area: 'auto', area: 'auto',
closeBtn: 1, closeBtn: 1,
time: 0, //0表示不自动关闭 icon: -1,
time: 0, // 0 表示不自动关闭
zIndex: 19891014, zIndex: 19891014,
maxWidth: 360, maxWidth: 360,
anim: 0, anim: 0,
isOutAnim: true, //退出动画 isOutAnim: true, // 退出动画
minStack: true, //最小化堆叠 minStack: true, // 最小化堆叠
icon: -1,
moveType: 1, moveType: 1,
resize: true, resize: true,
scrollbar: true, //是否允许浏览器滚动条 scrollbar: true, // 是否允许浏览器滚动条
tips: 2 tips: 2
}; };
@ -382,25 +382,45 @@ Class.pt.vessel = function(conType, callback){
return that; return that;
}; };
//创建骨架 // 创建骨架
Class.pt.creat = function(){ Class.pt.creat = function(){
var that = this var that = this;
,config = that.config var config = that.config;
,times = that.index, nodeIndex var times = that.index, nodeIndex;
,content = config.content var content = config.content;
,conType = typeof content === 'object' var conType = typeof content === 'object';
,body = $('body'); 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) { if(config.removeFocus) {
document.activeElement.blur(); // 将原始的聚焦节点失焦 document.activeElement.blur(); // 将原始的聚焦节点失焦
} }
// 初始化 area 属性
if(typeof config.area === 'string'){ if(typeof config.area === 'string'){
config.area = config.area === 'auto' ? ['', ''] : [config.area, '']; config.area = config.area === 'auto' ? ['', ''] : [config.area, ''];
} }
//anim兼容旧版shift // anim 兼容旧版 shift
if(config.shift){ if(config.shift){
config.anim = config.shift; config.anim = config.shift;
} }
@ -500,13 +520,8 @@ Class.pt.creat = function(){
}); });
}; };
// 记录关闭动画 // 记录配置信息
if(config.isOutAnim){ that.layero.data('config', config);
that.layero.data({
isOutAnim: true,
anim: config.anim
});
}
}; };
// 当前实例的 resize 事件 // 当前实例的 resize 事件
@ -1025,8 +1040,6 @@ layer.style = function(index, options, limit){
// 最小化 // 最小化
layer.min = function(index, options){ layer.min = function(index, options){
options = options || {};
var layero = $('#'+ doms[0] + index); var layero = $('#'+ doms[0] + index);
var maxminStatus = layero.data('maxminStatus'); var maxminStatus = layero.data('maxminStatus');
@ -1034,8 +1047,10 @@ layer.min = function(index, options){
if(maxminStatus === 'max') layer.restore(index); // 若当前为最大化，则先还原后再最小化 if(maxminStatus === 'max') layer.restore(index); // 若当前为最大化，则先还原后再最小化
layero.data('maxminStatus', 'min'); layero.data('maxminStatus', 'min');
options = options || layero.data('config') || {};
var shadeo = $('#'+ doms.SHADE + index); var shadeo = $('#'+ doms.SHADE + index);
var elemMin = layero.find('.layui-layer-min');
var titHeight = layero.find(doms[1]).outerHeight() || 0; var titHeight = layero.find(doms[1]).outerHeight() || 0;
var minLeft = layero.attr('minLeft'); // 最小化时的横坐标 var minLeft = layero.attr('minLeft'); // 最小化时的横坐标
var hasMinLeft = typeof minLeft === 'string'; // 是否已经赋值过最小化坐标 var hasMinLeft = typeof minLeft === 'string'; // 是否已经赋值过最小化坐标
@ -1077,7 +1092,7 @@ layer.min = function(index, options){
layero.attr('position', position); layero.attr('position', position);
layer.style(index, settings, true); layer.style(index, settings, true);
layero.find('.layui-layer-min').hide(); elemMin.hide();
layero.attr('type') === 'page' && layero.find(doms[4]).hide(); layero.attr('type') === 'page' && layero.find(doms[4]).hide();
ready.rescollbar(index); ready.rescollbar(index);
@ -1157,7 +1172,10 @@ layer.close = function(index, callback){
) : $('#'+ doms[0] + index) ) : $('#'+ doms[0] + index)
}(); }();
var type = layero.attr('type'); var type = layero.attr('type');
var data = layero.data() || {}; var options = layero.data('config') || {};
var hideOnClose = options.id && options.hideOnClose; // 是否关闭时移除弹层容器
if(!layero[0]) return;
// 关闭动画 // 关闭动画
var closeAnim = ({ var closeAnim = ({
@ -1165,11 +1183,19 @@ layer.close = function(index, callback){
slideLeft: 'layer-anim-slide-left-out', slideLeft: 'layer-anim-slide-left-out',
slideUp: 'layer-anim-slide-up-out', slideUp: 'layer-anim-slide-up-out',
slideRight: 'layer-anim-slide-right-out' slideRight: 'layer-anim-slide-right-out'
})[data.anim] || 'layer-anim-close'; })[options.anim] || 'layer-anim-close';
if(!layero[0]) return; // 移除主容器
var remove = function(){
var WRAP = 'layui-layer-wrap';
var WRAP = 'layui-layer-wrap', remove = function(){ // 是否关闭时隐藏弹层容器
if(hideOnClose){
layero.removeClass('layer-anim '+ closeAnim);
return layero.hide();
}
// 是否为页面捕获层
if(type === ready.type[1] && layero.attr('conType') === 'object'){ if(type === ready.type[1] && layero.attr('conType') === 'object'){
layero.children(':not(.'+ doms[5] +')').remove(); layero.children(':not(.'+ doms[5] +')').remove();
var wrap = layero.find('.'+WRAP); var wrap = layero.find('.'+WRAP);
@ -1178,7 +1204,7 @@ layer.close = function(index, callback){
} }
wrap.css('display', wrap.data('display')).removeClass(WRAP); wrap.css('display', wrap.data('display')).removeClass(WRAP);
} else { } else {
//低版本IE 回收 iframe // 低版本 IE 回收 iframe
if(type === ready.type[2]){ if(type === ready.type[2]){
try { try {
var iframe = $('#'+ doms[4] + index)[0]; var iframe = $('#'+ doms[4] + index)[0];
@ -1201,13 +1227,18 @@ layer.close = function(index, callback){
delete ready.events.resize[index]; delete ready.events.resize[index];
} }
}; };
// 移除遮罩
var removeShade = (function fn(){
$('#'+ doms.SHADE + index)[
hideOnClose ? 'hide' : 'remove'
]();
})();
// 是否允许关闭动画 // 是否允许关闭动画
if(data.isOutAnim){ if(options.isOutAnim){
layero.addClass('layer-anim '+ closeAnim); layero.addClass('layer-anim '+ closeAnim);
} }
$('#layui-layer-moves, #'+ doms.SHADE + index).remove();
layer.ie == 6 && ready.reselect(); layer.ie == 6 && ready.reselect();
ready.rescollbar(index); ready.rescollbar(index);
@ -1217,7 +1248,7 @@ layer.close = function(index, callback){
ready.minStackArr.push(layero.attr('minLeft')); ready.minStackArr.push(layero.attr('minLeft'));
} }
if((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')){ if((layer.ie && layer.ie < 10) || !options.isOutAnim){
remove() remove()
} else { } else {
setTimeout(function(){ setTimeout(function(){

44
src/modules/table.js
View File

@ -1674,20 +1674,22 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(!height) return; 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){ if(options.toolbar){
bodyHeight -= (that.layTool.outerHeight() || 50); bodyHeight -= (that.layTool.outerHeight() || 50);
} }
//减去统计栏的高度 // 减去统计栏的高度
if(options.totalRow){ if(options.totalRow){
bodyHeight -= (that.layTotal.outerHeight() || 40); bodyHeight -= (that.layTotal.outerHeight() || 40);
} }
//减去分页栏的高度 // 减去分页栏的高度
if(options.page || options.pagebar){ if(options.page || options.pagebar){
bodyHeight -= (that.layPage.outerHeight() || 43); bodyHeight -= (that.layPage.outerHeight() || 43);
} }
@ -2140,11 +2142,13 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 复选框选择（替代元素的 click 事件） // 复选框选择（替代元素的 click 事件）
that.elem.on('click', 'input[name="layTableCheckbox"]+', function(){ that.elem.on('click', 'input[name="layTableCheckbox"]+', function(){
var checkbox = $(this).prev() var othis = $(this);
,children = that.layBody.find('input[name="layTableCheckbox"]') var td = othis.closest('td');
,index = checkbox.parents('tr').eq(0).data('index') var checkbox = othis.prev();
,checked = checkbox[0].checked var children = that.layBody.find('input[name="layTableCheckbox"]');
,isAll = checkbox.attr('lay-filter') === 'layTableAllChoose'; 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; if(checkbox[0].disabled) return;
@ -2167,14 +2171,19 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
MOD_NAME, 'checkbox('+ filter +')', MOD_NAME, 'checkbox('+ filter +')',
commonMember.call(checkbox[0], { commonMember.call(checkbox[0], {
checked: checked, 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(){ 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 checked = radio[0].checked;
var index = radio.parents('tr').eq(0).data('index'); var index = radio.parents('tr').eq(0).data('index');
@ -2191,7 +2200,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
radio[0], radio[0],
MOD_NAME, 'radio('+ filter +')', MOD_NAME, 'radio('+ filter +')',
commonMember.call(radio[0], { commonMember.call(radio[0], {
checked: checked checked: checked,
getCol: function(){ // 获取当前列的表头配置信息
return that.col(td.data('key'));
}
}) })
); );
}); });
@ -2371,6 +2383,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 行工具条操作事件 // 行工具条操作事件
var toolFn = function(type){ var toolFn = function(type){
var othis = $(this); var othis = $(this);
var td = othis.closest('td');
var index = othis.parents('tr').eq(0).data('index'); var index = othis.parents('tr').eq(0).data('index');
layui.event.call( layui.event.call(
@ -2378,7 +2391,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
MOD_NAME, MOD_NAME,
(type || 'tool') + '('+ filter +')', (type || 'tool') + '('+ filter +')',
commonMember.call(this, { commonMember.call(this, {
event: othis.attr('lay-event') event: othis.attr('lay-event'),
getCol: function(){ // 获取当前列的表头配置信息
return that.col(td.data('key'));
}
}) })
); );
// 设置当前行选中样式 // 设置当前行选中样式