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
本文作者:kingwzun
本文链接:https://www.cnblogs.com/kingwz/p/16989023.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
2021-12-17 2021 ICPC Asia Taipei Regional(Gym - 103443A)补题