Layui 内置模块 (三) 弹层 layer

Layui 官网地址
弹层组件文档 - layui.layer
layer 官方示例

简介

模块加载名称:layer,独立版本:layer.layui.com

layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务,在 Web 开发者的圈子里口口相传,乃至于成为今天的 layui 最强劲的源动力。而由于 layer 在 layui 体系中的位置比较特殊,甚至让很多人都误以为 layui = layer ui,所以再次强调 layer 只是作为 layui 的一个弹层模块,由于其用户基数较大,所以至今仍把她作为独立组件来维护。

使用场景

由于layer可以独立使用,也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

作为独立组件使用 layer

1
2
3
4
5
6
// 引入好layer.js后,直接用即可
<script src="layer.js"></script>

<script>
layer.msg('hello');
</script>

在 layui 中使用 layer

1
2
3
4
5
layui.use('layer', function(){
var layer = layui.layer;

layer.msg('hello');
});

除了上面有所不同,其它都完全一致。

简介

layer.ready(callback) - 初始化就绪

由于我们的layer内置了轻量级加载器,所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时,你最好是将弹层放入ready方法中

layer.open(options) - 原始核心方法

基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走layer.open(),创建任何类型的弹层都会返回一个当前层索引

layer.alert(content, options, yes) - 普通信息框

它的弹出似乎显得有些高调,一般用于对用户造成比较强烈的关注,类似系统alert,但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数,可以设定各种你所需要的基础参数,但如果你不需要的话,直接写回调即可。

layer.confirm(content, options, yes, cancel) - 询问框

类似系统confirm,但却远胜confirm,另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的,它的参数也是自动补齐的。

layer.msg(content, options, end) - 提示框

我们在源码中用了相对较大的篇幅来定制了这个msg,目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。因为它简单,而且足够得自觉,它不仅占据很少的面积,而且默认还会3秒后自动消失所有这一切都决定了我对msg的爱。因此我赋予了它许多可能在外形方面,它坚持简陋的变化,在作用方面,它坚持零用户操作。而且它的参数也是自动补齐的。

layer.load(icon, options) - 加载层

type:3的深度定制。load并不需要你传太多的参数,但如果你不喜欢默认的加载风格,你还有选择空间。icon支持传入0-2如果是0,无需传。另外特别注意一点:load默认是不会自动关闭的,因为你一般会在ajax回调体中关闭它。

示例

示例一

1
2
3
4
5
6
7
8
9
<script>
layui.use(['layer'], function(){
var layer = layui.layer;

layer.ready(function(){
layer.msg('你若安好便是晴天');
});
});
</script>

示例二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// 监听行工具事件
// 绑定查删改事件test对于table中的lay-filter的值
table.on('tool(test)', function (obj) {
var data = obj.data;
if (obj.event == 'del') {
layer.confirm('真的删除么?',{
skin: 'layui-layer-lan'
,closeBtn: 0
,anim: 4 //动画类型
}, function (index) {
delUser(data.userId);
layer.close(index);
});
} else if (obj.event == 'edit') {
editUser(data.userId);
}
});

// 新增用户信息
function addUser() {
layer.open({
area: ['45%', '80%'], //宽高
type: 2,
fix: false, //不固定
maxmin: true,
content: '/sysUser/user/add'
});
}

// 修改用户信息
function editUser(userId) {
layer.open({
area: ['45%', '80%'], //宽高
type: 2,
fix: false, //不固定
maxmin: true,
content: '/sysUser/user/edit/' + userId,
});
};

// 删除用户信息
function delUser(userId) {
$.ajax({
url: "/sysUser/user/del/" + userId,
type: "delete",
success: function (result) {
if (result.code == web_status.SUCCESS) {
layer.msg(result.msg, {
icon: 1,
time: 2000
}, function () {
location.reload();
});
} else {
layer.msg(result.msg, {
icon: 2
})
}
}
});
};


示例三

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
layui.use(['form'], function () {
var form = layui.form;

// 自定义验证规则
form.verify({
name: [/(.+){2,20}$/, '用户名长度在 2-20 之间']
, pass: [/(.+){6,12}$/, '密码长度在 6-12 之间']
});

form.on('submit(edit)', function (data) {
$.ajax({
url: "/sysUser/user/edit",
type: "put",
data: $(data.form).serialize(),
success: function (result) {
if (result.code == web_status.SUCCESS) {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.msg(result.msg, {
icon: 1,
time: 2000
}, function () {
window.parent.location.reload();
parent.layer.close(index);
});
} else {
parent.layer.msg(result.msg, {
icon: 2
})
}
}
})
return false;
})
});
</script>