Layer弹出层组件
概述
layer是layui的一部分
使用
layer.ready(callback)
作用:初始化就绪
由于layer内置了轻量级加载器,所以你根本不需要单独引入css等文件。但是加载总是需要过程的。
当在页面一打开就要执行弹层时,最好方法是将弹层放入ready方法中(类似于window.onload)如:
<body>
<script src="js/jquery-3.6.2.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//页面加载完后
// window.onload=function(){
// }
// $(function(){
// });
layer.ready(function(){
layer.msg("很高兴见到你")
});
</script>
</body>
绑定点击事件
和原生js类似,示例代码如下:
<body>
<button id="test1">欢迎学习Layer</button>
<script src="js/jquery-3.6.2.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 绑定点击事件(按钮)
$('#test1').click(function(){
layer.msg("Hello Layer");
})
</script>
</body>
基础参数
我们提到的基础参数主要指调用方法时用到的配置项。
基础参数可合理应用于任何层类型中,您不需要所有都去配置,大多数都是可选的。
常见的如:
- content:弹出的内容
- time:弹窗时间
两者以键值形式存在,使用方法如:
layer.msg('Hello Layer',{time:4000})
layer.open(options)
作用:弹窗,是原始核心方法,是使用次数最高的方法。
格式:
var index = layer.open({
content: 'test'
//基础参数:值
});
返回值: 当前层索引
传入参数: js格式
最常用的基础参数:
名称 | 说明 |
---|---|
title | 弹窗的标题 |
type | 弹窗的类型(因为open方法能弹出各种弹窗类型) |
content | 弹窗里面显示的内容 |
icon | 弹窗上面显示的图标 |
time | 弹窗多久会自动关闭 |
btn | 弹窗显示几个按钮 |
注意
- 不管是使用哪种方式创建层,都是走layer.open()。
type - 基本层类型
layer提供了5种层类型。
传入不同的值(Number类型),有不同的效果:
- 0(信息框,默认)
- 1(页面层)
- 2(iframe层 可以嵌套一个网页)
- 3(加载层)
- 4(tips层)
注意:
- 传入值默认为
0
- 采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)
具体效果如下:
传输值 | 名称 | 效果 |
---|---|---|
0 | 信息框 | ![]() |
1 | 页面层 (传入任意的文本或html文件) | ![]() |
2 | iframe层 可以嵌套一个网页(传入URL) | ![]() |
3 | 加载层 | ![]() |
4 | tips层 | ![]() |
layer.close(index)
作用: 关闭特定层
关于它似乎没有太多介绍的必要,唯一让你疑惑的,可能就是这个index了吧。事实上它非常容易得到。
layer.alert()
作用:警告
layer.alert();
等价于layer.open() type=0
格式:
index=layer.alert(content, [options], function())
注意:
- 它的参数是自动向左补齐的。
- 通过第二个参数,可以设定各种你所需要的基础参数,但如果你不需要的话,直接写回调即可。
效果:
样式代码1(方便理解):
<body>
<button id="test1" >欢迎学习Layer</button>
<script src="js/jquery-3.6.2.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 绑定点击事件(按钮)
$('#test1').click(function(){
var index=layer.alert(
'这是一个警告',
{icon:2},
function(){
layer.close(index)
}
)
})
</script>
</body>
样式代码2(常用风格):
// 绑定点击事件(按钮)
$('#test1').click(function(){
layer.alert(
'这是一个警告',
{icon:2},
function(index){
layer.close(index)
}
)
})
layer.confirm
作用:询问框
格式:
layer.confirm(content, options, yes, cancel)
效果:
样式代码:
<body>
<button id="test1" >欢迎学习Layer</button>
<script src="js/jquery-3.6.2.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 绑定点击事件(按钮)
$('#test1').click(function(){
layer.confirm(
'您确定要删除吗',
{icon:3,title:'提示'},
function(index){
layer.close(index)
}
)
})
</script>
</body>
content-内容
类型:String/DOM/Array,默认:''
content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。
效果:
实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button id="test1" >欢迎学习Layer</button>
<script src="js/jquery-3.6.2.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 绑定点击事件(按钮)
$('#test1').click(function(){
layer.open({
type:1,
area:['500px','300px'],
content:$('#divId')
})
})
</script>
</body>
<div id="divId" style="display:none;" >
姓名:<input type="text">
</div>
</html>
btn - 按钮
类型:String/Array,默认:'确认'
信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。
1、当您只想自定义一个按钮时,你可以btn: '我知道了',
2、当你要定义两个按钮时,你可以btn: ['yes', 'no']。
3、当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推
封装自己的layer库
为什么要封装自己的layer库
- 方便
- 减少重复代码
方法
layer使用场景
1、正确提示msg
2、错误提示msg
3、警告提示alert
4、确实提示confirm
5. 弹出页面open