《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:
1.18.21 resize是否允许拉伸
类型:Boolean,默认值true。
默认情况下,可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能,设置 false即可。该参数对loading、tips层无效。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "test text 1",
resize: false
});
</script>
</body>
</html>
弹出层的大小不可以改变。
1.18.22 resizing监听窗口拉伸动作
类型:Function,默认值null。
当拖拽弹层右下角进行尺寸调整时,如果设置了该回调,则会执行。回调返回一个参数:当前层的DOM对象。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "test text 1",
resizing: function(layero) {
var abc = layero;
var xyz = "";
}
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.18.23 scrollbar是否允许浏览器出现滚动条
类型:Boolean,默认值true。
默认允许浏览器滚动,如果设置scrollbar: false,则屏蔽。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "test text 1",
scrollbar: false
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.18.24 maxWidth最大宽度
类型:Number,默认值360px。
请注意:只有当area: 'auto'时,maxWidth的设置才有效。
一般在布局时,不想要元素的宽度限定死,并且想要它的实际宽度随其本身内容自适应,但又不想宽度过大破坏整体布局,这时候就会应用max-width限制元素的最大宽度,元素实际宽度在0~max-width之间。具有自动换行的效果。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "begin<span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span>end",
area: ['2000px', '300px'],
});
</script>
</body>
</html>
运行效果如图1-xx所示。
宽高都固定了,并且看不到begin和end字符串信息,过多的信息全被隐藏了,这就是固定宽高的缺点。
使用属性maxWidth除了支持最大宽度外还可以实现宽度自适应。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
layer.open({
type: 1,
content: "begin<span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span>end",
area: 'auto',
maxWidth: 2000
});
</script>
</body>
</html>
最大宽度显示效果如图1-xx所示。
并且还具有宽度自适应的效果,如图1-xx所示。
浏览器在任何宽度下都可以把信息显示完整。
1.18.25 maxHeight最大高度
类型:Number,默认值无。
请注意:只有当高度自适应时,maxHeight的设置才有效。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "begin!begin!begin!<span style='color:red'>我是span</span><span style='color:red'>我是span</span>end!end!end!",
area: ['200px', '300px']
});
</script>
</body>
</html>
固定宽高的运行效果如图1-xx所示。
在弹出层的下面出现了大面积空白,影响界面美观性,属性maxHeight支持高度自适应。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "begin!begin!begin!<span style='color:red'>我是span</span><span style='color:red'>我是span</span>end!end!end!",
area: 'auto',
maxHeight: 400
});
</script>
</body>
</html>
运行效果如图1-xx所示。
通过使用属性maxHeight后,弹出层下面的大面积空白消失了,说明属性maxHeight支持高度自适应。
如果内容过多,最大高度maxHeight还有效吗?
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "begin!begin!begin!<span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span>end!end!end!",
area: 'auto',
maxHeight: 400
});
</script>
</body>
</html>
运行效果如图1-xx所示。
内容超过400px后出现垂直滚动条,最大高度是400px。
1.18.26 zIndex层叠顺序
默认值19891014(作者贤心生日)。
一般用于解决和其它组件的层叠冲突。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div style="position: absolute; z-index: 19891015;">我在最上面!</div>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "begin!begin!begin!end!end!end!",
});
</script>
</body>
</html>
运行效果如图1-xx所示。
自定义div的z-index: 19891015值大于19891014,所以文字可以选中,说明自定义div在遮罩层之上。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div style="position: absolute; z-index: 100;">我在最上面!</div>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "begin!begin!begin!end!end!end!",
});
</script>
</body>
</html>
运行效果如图1-xx所示。
文字“我在最上面!”选中不了了,因为在遮罩层的下面,被遮罩层覆盖了。
1.18.27 move触发拖动的元素
类型:String/DOM/Boolean,默认值'.layui-layer-title'。
默认是触发标题区域实现拖拽。如果想单独定义,指向元素的选择器或者DOM即可。如move: '.mine-move'。还配置设置move: false来禁止拖拽。
1.18.27.1 测试String
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "<span class='myspanclass'>我的span</span>",
move: '.myspanclass'
});
</script>
</body>
</html>
1.18.27.2 测试DOM
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div id="mydiv" style="display: none;">
<div>我是div</div>
</div>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: $("#mydiv"),
move: $("#mydiv div")
});
</script>
</body>
</html>
1.18.27.3 禁用move
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "<span style='color:red'>我是span</span>",
move: false
});
</script>
</body>
</html>
1.18.28 moveOut是否允许拖拽到窗口外
类型:Boolean,默认值false。
默认只能在窗口内拖拽,如果想拖到窗外,那么设置moveOut: true即可
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "<span style='color:red'>我是span</span>",
moveOut: true
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.18.29 moveEnd拖动完毕后的回调方法
类型:Function,默认值null。
默认不会触发moveEnd,如果需要可以设置moveEnd: function(layero){}即可。其中layero为当前层的DOM对象
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
layer.open({
type: 1,
content: "<span style='color:red'>我是span</span>",
moveEnd: function(layero) {
alert('拖动结束!');
}
});
</script>
</body>
</html>
1.18.30 tips方向和颜色
类型:Number/Array,默认值2。
tips层的私有参数。支持上右下左四个方向,通过1-4进行方向设置。如tips: 3则表示在元素的下面出现。有时还可能会定义一些颜色,可以设置tips: [1, '#c00']。
1.18.30.1 测试1
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item" style="width: 500px;margin: 400px;"">
<label class=" layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
class="layui-input">
</div>
</div>
</form>
<script src="layui/layui.all.js"></script>
<script>
var form = layui.form;
var layer = layui.layer;
layer.open({
type: 4,
tips: [1, 'red'],
content: ['内容不能为空', '#username']
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.18.30.2 测试2
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item" style="width: 500px;margin: 400px;"">
<label class=" layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
class="layui-input">
</div>
</div>
</form>
<script src="layui/layui.all.js"></script>
<script>
var form = layui.form;
var layer = layui.layer;
layer.open({
type: 4,
tips: [2, 'red'],
content: ['内容不能为空', '#username']
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.18.30.3 测试3
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item" style="width: 500px;margin: 400px;"">
<label class=" layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
class="layui-input">
</div>
</div>
</form>
<script src="layui/layui.all.js"></script>
<script>
var form = layui.form;
var layer = layui.layer;
layer.open({
type: 4,
tips: [3, 'red'],
content: ['内容不能为空', '#username']
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.18.30.4 测试4
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item" style="width: 500px;margin: 400px;"">
<label class=" layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
class="layui-input">
</div>
</div>
</form>
<script src="layui/layui.all.js"></script>
<script>
var form = layui.form;
var layer = layui.layer;
layer.open({
type: 4,
tips: [4, 'red'],
content: ['内容不能为空', '#username']
});
</script>
</body>
</html>
运行效果如图1-xx所示。