学习要点:
1. 基础参数
本节课我们来开始了解 Layui 的内置模块:弹出层的方法演示。
一.基础参数
1. 参数,我们主要通过 open 方法来演示,其它方法类似;
layer . open ({
// 标题
title : ' 标题 ' ,
// 内容
content : ' 这是内容 ~' ,
//icon 图标,默认信息框 -1 ,其余 0-6
icon : 6 ,
//3 秒后自动关闭
time : 5000 ,
// 动画效果 0-6
anim : 0 ,
// 设置宽高
area : [ '400px' , '250px' ],
// 坐标,默认居中,值较多,看手册
offset : 'auto' ,
})
PS :这里还有一些其它效果:滚动、拉伸、固定、拖拽、动画、遮罩、最大最小等;
2. 除了 open 方法,其它方法都有各种按钮和固定回调, open 都可以实现;
layer . open ({
// 标题
title : ' 标题 ' ,
// 内容
content : ' 这是内容 ~' ,
// 按钮
btn : [ ' 确定 ' , ' 取消 ' ],
// 回调设置: btn1 表示第一个按钮,以此类推
// 当然, btn1 也可以改为 yes ,表示第一个 btn
// 参数 index 表示当前弹窗的下标,也就是第几个
// 参数 layero 表示当前的弹窗对象
btn1 ( index , layero ) {
alert ( layero )
},
// 右上角关闭按钮的回调
cancel ( index , layero ) {
alert ( index )
},
// 弹窗创建完毕时执行这个回调
success ( layero , index ) {
alert ( index )
},
// 按钮的排列, l,c,r
btnAlign : 'l' ,
// 关闭按钮的样式 :0-2 , 0 表示不显示
closeBtn : 1 ,
})
3. 还有其余的比较实用的弹窗,比如 tips 吸附、 iframe 框架;
layer . tips ( ' 吸附 ' , '#btn-tips' )
layer . open ({
// 必须设置类型 2 为 iframe
type : 2 ,
content : [ 'http://www.baidu.com' , 'no' ]
})
PS :剩下还有一些方法和参数,都比较重复,可以查阅学习;
PS :由于手册没有案例,本身它还提供了一个案例页面,如下: