5 弹层组件文档- layui.layer
2019-01-15 本文已影响29人
滔滔逐浪
icon - 图标。信息框和加载层的私有参数
类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。如：
//eg1
layer.alert('酷毙了', {icon: 1});
//eg2
layer.msg('不开心。。', {icon: 5});
//eg3
layer.load(1); //风格1的加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../layui/layui.js"></script>
</head>
<body>
<script>
layui.use('layer',function(){
var layer=layui.layer;
layer.msg('hello');
layer.msg('不开心。。', {icon: 5});
});
</script>
</body>
</html>
Btn按钮
类型：String/Array，默认：'确认'
信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: '我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no']。当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。如：
//eg1
layer.confirm('纳尼？', {
btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
,btn3: function(index, layero){
//按钮【按钮三】的回调
}
}, function(index, layero){
//按钮【按钮一】的回调
}, function(index){
//按钮【按钮二】的回调
});
-----------
layui.use('layer',function(){
var layer=layui.layer;
layer.msg('hello');
layer.msg('不开心。。', {icon: 5});
layer.confirm('你好',{
btn:['按钮一','按钮二','按钮三']//可以无限个按钮
,btn3: function (index,layerno) {
//按钮【按钮三】的回调
layer.msg('不开心。。', {icon: 1});
}
},function (index,layero) {
//按钮【按钮一】的回调
layer.msg('不开心。。', {icon:2});
},function (index,layero) {
//按钮【按钮二】的回调
layer.msg('不开心。。', {icon: 5});
});
});
给配置层设置默认的参数
layer.config({
anim: 1, //默认动画风格
skin: 'layui-layer-molv' //默认皮肤
…
});
//除此之外，extend还允许你加载拓展的css皮肤，如：
layer.config({
//如果是独立版的layer，则将myskin存放在./skin目录下
//如果是layui中使用layer，则将myskin存放在./css/modules/layer目录下
extend: 'myskin/style.css'
});
layer.ready(callback) -初始化就绪
由于我们的layer内置了轻量级加载器，所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时，你最好是将弹层放入ready方法中，如：
//页面一打开就执行弹层
layer.ready(function(){
layer.msg('很高兴一开场就见到你');
});
```
layer.msg(content, options, end) - 提示框
//eg1
layer.msg('只想弱弱提示');
//eg2
layer.msg('有表情地提示', {icon: 6});
//eg3
layer.msg('关闭后想做些什么', function(){
//do something
});
//eg
layer.msg('同上', {
icon: 1,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
//do something
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../layui/layui.js"></script>
</head>
<body>
1111111111
</body>
<script>
layui.use('layer',function(){
var layer=layui.layer;
//页面一打开就执行弹层
layer.ready(function(){
layer.msg('很高兴一开场就见到你');
});
layer.open({
title: '回车关闭测试'
,content: '我是内容'
,btn: ['确认','关闭']
,success: function(layero, index){
this.enterEsc = function(event){
if(event.keyCode === 13){
layer.close(index);
return false; //阻止系统默认回车事件
}
};
$(document).on('keydown', this.enterEsc); //监听键盘事件，关闭层
}
,end: function(){
}
});
layer.open({
content: '回调',
yes: function (index,layero) {
//do something
layer.close(index);//如果设置也是回调，需要进行手工关闭
}
});
layer.config({
anim: 1, //默认动画风格
skin: 'layui-layer-molv' //默认皮肤
});
layer.msg('hello');
layer.msg('不开心。。', {icon: 5});
layer.confirm('你好',{
btn:['按钮一','按钮二','按钮三']//可以无限个按钮
,btn3: function (index,layerno) {
//按钮【按钮三】的回调
layer.msg('不开心。。', {icon: 1});
}
},function (index,layero) {
//按钮【按钮一】的回调
layer.msg('不开心。。', {icon:2});
},function (index,layero) {
//按钮【按钮二】的回调
layer.msg('不开心。。', {icon: 5});
});
});
