前端最好用弹框组件-layer
layer是一款近年来备受青睐的web弹层组件,它甚至兼容了包括IE6在内的所有主流浏览器;而且layer采用MIT开源许可证,将会永久性提供无偿服务.现在你肯定对layer充满了兴趣,首先,了解layer肯定避不开layui,layui是一个集合多个组件,例如:layer/laypage/laydate等的前端框架,和Bootstrap是同类别的,而layer一直是layui的代表作.如果舍弃layui单独使用layer的话，他需要依赖于jq1.8以上版本引入；废话不多说，直接能进入layer的学习吧
学习layer第一个知识点就是:layer中所有弹框的参数都是向左自动补齐的
我们来看下layer的弹框分哪几种：
layer.msg(content,options,end)-提示框
layer.msg()应该说是最简单和最自觉的,不仅占据很少的面积而且默认3秒后即自动消失,也因此让他成为程序员的最爱;
layer.msg('玩命提示中');layer.msg(content, options, end)-提示框可以有三个参数:弹框内容/弹框样式(弹框样式有很多,这里只是举个例子,具体的后面详细介绍)/关闭时调用的函数,eg:
layer.msg('玩命提示中...', {
icon: 1, //icon-图标,信息框和加载层的私有参数,类型:Number,默认:-1(信息框)/0(加载层);信息框默认不显示图标,想显示图标时默认皮肤可以传入0-6;如果是加载层可以传入0-2
time: 5000, //5秒关闭(默认是3秒)
btn: ['明白了', '知道了'],
}, function(){
alert('轻轻的我走了,正如我轻轻的来')
}); 不要以为msg仅仅这些功能,其实它还有很多其他的功能,例如:msg也可以添加按钮,如果time设置为0即不自动关闭时可以通过按钮来控制;有了按钮便可以给按钮编写回调函数;第一个按钮的函数名称时yes,后面就依次:btn2/btn3...;编写回调函数的时候默认传两个参数(index,layero)index和当前层DOM对象
layer.msg('玩命提示中...', {
icon: 1,
time: 0, //time取0则不关闭
btn: ['嘿嘿', '呵呵','哈哈'],
yes:function(){
history.go(-1);
},
btn2:function(){
location.reload();
},
btn3:function(index,layero){
layer.msg("按钮2回调,参数是:"+index);
return false //开启该代码可禁止点击该按钮关闭
},
}, function(){
alert('轻轻的我走了,正如我轻轻的来')
}); msg还可以与layer中很多其他类型的弹框一起使用
layer.alert(content, options, yes)-普通信息框
layer.alert的弹出就比msg高调,一般用于对用户造成较强烈的关注,类似系统alert,却更灵便
layer.alert('只想简单的提示'); 知道msg可以有那么多功能后肯定对alert的期待也不仅仅如此,so layer.alert也的确没有让大家失望.layer.alert(content,options,yes)-layer.alert同样有三个参数,第一个是弹出内容，第二个是样式设置,第三个是回调函数.下面来看个msg与alert的合作示例:
layer.alert('墨绿风格，点击确认看深蓝', {
skin: 'layui-layer-molv', //样式类名,自定义样式
closeBtn: 1, // 是否显示关闭按钮
anim: 1, //动画类型
btn: ['重要','奇葩'], //按钮
icon: 6, // icon
yes:function(){
layer.msg('按钮1');
},
btn2:function(){
layer.msg('按钮2');
},
success:function(){
alert('调用成功');
}
});layer.tips(content, follow, options)-tips层
tips层也是我大家比较喜欢的一个层类型,因为它拥有和msg一样的低调和自觉,而且会智能定位,即灵活地判断它应该出现在哪边,默认是在元素右边弹出
layer.tips('只想提示地精准些', '#ida');layer.tips(content,follow,options)-同样可以有三个参数,但却和上面两个的参数有些不同;第一个参数是弹出内容,第二个参数是吸附元素选择器,第三个是弹框样式
layer.tips('只想提示地精准些', '#ida', {
tips:[1,'#3595CC'],
area: 'auto',
maxWidth: '300', //area:'auto'时maxWidth的设定才有效
});tips层的私有参数;支持上右下左四个方向,通过1-4进行方向设定,默认是2,有时还可能会定义颜色
layer.confirm(content, options, yes, cancel)-询问框
类似系统confirm,但却远胜confirm;另外它不是和系统confirm一样阻塞你需要把交互的语句放在回调体中
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'] //可以无限个按钮
}, function(){ //这两个function相当于两个按钮点击事件的回调函数
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 2000, //2s后自动关闭
btn: ['明白了', '知道了']
});
});layer.load(icon, options)-加载层
layer.load(0, {shade: false}); //0代表加载的风格
load并不需要太多参数,如果不喜欢默认加载风格,icon支持传入0-2;如果是0无需传;另外load默认是不会自动关闭的,一般会在ajax回调体中通过layer.close(index);关闭它
layer.prompt(options,yes)-输入层
layer.prompt(options,yes)-不仅支持传入基础参数还可以传入prompt专用的属性,也可以不传;那么prompt都有哪些专有属性呢
prompt层新定制的成员如下
{
formType: 1, //输入框类型,支持0(文本)默认 1(密码) 2(多行文本)
value: '', //初始时的值,默认空字符
maxlength: 140, //可输入文本的最大长度,默认500
}layer.prompt(options,yes)中yes携带value表单值/index索引/elem表单元素/
layer.prompt({
formType: 2,
value: '请输入....',
title: 'prompt输入框',
area: ['300px', '150px'],
maxlength: 100
},
function(value, index, elem){
alert(value); //得到value
layer.close(index);
}
);layer.tab(options)-tab层
layer.tab(options)只单独定制了一个成员，即tab:[],这个好像没有什么可介绍的,简单粗暴看例子吧:
layer.tab({
area: ['500px', '200px'], //每个tab标题最小80px最大260px
tab:[{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
})相册层
相册层,也称为图片查看器,它的出场动画从layer内置的动画类型中随机展现;photos支持传入json和直接读取页面图片两种方式
json传入
先来看我的json文件,json需严格按照如下格式:
{
"status": 1,
"msg": "",
"title": "photo",
"id": 8,
"start": 0,
"data": [
{
"alt": "layer",
"pid": 109,
"src": "theme/default/icon.png",
"thumb": ""
},
{
"alt": "bbb",
"pid": 110,
"src": "theme/default/icon-ext.png",
"thumb": ""
},
{
"alt": "ccc",
"pid": 111,
"src": "theme/default/loading-0.gif",
"thumb": ""
},
{
"alt": "ddd",
"pid": 112,
"src": "theme/default/loading-1.gif",
"thumb": ""
},
{
"alt": "eee",
"pid": 113,
"src": "theme/default/loading-2.gif",
"thumb": ""
}
]
}下面是调用这个json文件的例子:
$.getJSON('/jquery/photos.json', function(json){
layer.photos({
photos: json,
anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意:3.0之前的版本用shift参数)
});
}); 直接从页面中获取
即时通信
LayIM包含:自定义会话/接受好友音频视频/申请加群/客服模式等多个功能;但是LayIM是layui目前唯一的付费组件,所以在下载的layui包里并不包含LayIM,这里也不多说,有兴趣的同学可以自己付费学习
layer.open
layer.open(options)-是layer的最原始核心方法,也是露脸率最高的方法;不管是使用哪种方式创建层都是走layer.open();创建任何类型的弹层都会返回一个当前层索引;options即是基础参数
var index = layer.open({
content: 'test'
}); //index是一个重要的凭据,它是诸如layer.close(index)等方法的必传参数以layer.open为例来了解下layer中的参数:
基础参数
基础参数主要指调用方法时用到的配置项,如:layer.open({content:''})/layer.msg('',{time:3})等;content和time即是基础参数,以键值形式存在;基础参数可合理应用于任何层类型中,大多数都是可选的
type-基本层类型
类型:Number,默认:0;layer提供了5种层类型,可传入的值有:0(信息框,默认)/1(页面层)/2(iframe层)/3(加载层)/4(tips层);若采用layer.open({type:1})方式调用,则type为必填项(信息框除外)
title-标题
类型:String/Array/Boolean,默认:'信息';title支持三种类型的值,普通的字符串,如title:'我是标题'-只会改变标题文本;title:['文本','font-size:18px;']-数组第二项可以写任意css样式;不想显示标题栏可以title:false
content-内容
类型:String/DOM/Array,默认:'';content可传入的值灵活多变,不仅可以是普通的html内容,还可以指定DOM,更可以随着type的不同而不同
//如果是页面层
layer.open({
type:1,
content:'传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
type:1,
content:$('#ida') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url',{},function(str){
layer.open({
type:1,
content:str //如果str是object则需要字符拼接
});
});
//如果是iframe层
layer.open({
type:2,
content:'http://www.yonglibao.com' //这里content是一个URL,如果不想让iframe出现滚动条可以content:['http://sentsin.com','no']
});
//如果是用layer.open执行tips层
layer.open({
type:4,
content:['内容','#ida'] //数组第二项即吸附元素选择器或者DOM
}); skin-样式类名
类型:String,默认:'';skin不仅允许传入layer内置的样式class名,还可以传入自定义的class名,这意味着可以借助skin轻松完成不同的风格定制.目前layer内置的skin有:layui-layer-lan/layui-layer-molv
//单个使用
layer.open({
skin:'demo-class'
});
//全局使用,即所有弹出层都默认采用,但是单个配置skin的优先级更高
layer.config({
skin: 'demo-class'
}) area-宽高
类型:String/Array,默认:'auto',即layer是宽高都自适应的;但当你只想定义宽度时,可以area:'500px',高度仍然是自适应的;当宽高都要定义时,可以area:['500px','300px']
offset-坐标
类型:String/Array,默认:垂直水平居中;offset默认情况下不用设置;但如果不想垂直水平居中,可以进行以下赋值:
| 值 | 备注 |
|---|---|
| offset: '100px' | 只定义top坐标，水平保持居中 |
| offset: ['100px', '50px'] | 同时定义top、left坐标 |
| offset: 't' | 快捷设置顶部坐标 |
| offset: 'r' | 快捷设置右边缘坐标 |
| offset: 'b' | 快捷设置底部坐标 |
| offset: 'l' | 快捷设置左边缘坐标 |
| offset: 'lt' | 快捷设置左上角 |
| offset: 'lb' | 快捷设置左下角 |
| offset: 'rt' | 快捷设置右上角 |
| offset: 'rb' | 快捷设置右下角 |
icon-图标
icon为信息框和加载层的私有参数;类型:Number,默认:-1(信息框)/0(加载层);信息框默认不显示图标,想显示图标,默认皮肤可以传入0-6;如果是加载层,可以传入0-2
layer.alert('酷毙了', {icon: 1});
layer.msg('不开心。。', {icon: 5});
layer.load(1); //风格1的加载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){} //按钮二的回调
);
//eg2
layer.open({
content:'test',
btn:['按钮一','按钮二','按钮三'],
yes:function(index,layero){}, //按钮一的回调
btn2: function(index, layero){}, //按钮二的回调
btn3: function(index, layero){}, //按钮三的回调
cancel: function(){} //右上角关闭回调
});btnAlign-按钮排列
类型:String,默认:r;可以快捷定义按钮的排列位置,btnAlign的默认值为r,即右对齐;该参数可支持的赋值如下：
| 值 | 备注 |
|---|---|
| btnAlign: 'l' | 按钮左对齐 |
| btnAlign: 'c' | 按钮居中对齐 |
| btnAlign: 'r' | 按钮右对齐。默认值，不用设置 |
closeBtn-关闭按钮
类型:String/Boolean,默认:1;layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示则closeBtn:0
layer.open({
content:'啦啦啦啦，我是卖报的小画家',
btn:['按钮一','按钮二'],
closeBtn:1,
});shade-遮罩
类型:String/Array/Boolean,默认:0.3;默认是0.3透明度的黑色背景('#000');如果你想定义别的颜色,可以shade:[0.8,'#393D49'];如果你不想显示遮罩,可以shade:0
layer.open({
content:'啦啦啦啦，我是卖报的小画家',
btn:['按钮一','按钮二'],
closeBtn:1,
shade:0.8,
});shadeClose-是否点击遮罩关闭
类型:Boolean,默认:false;如果shade是存在的可以设定shadeClose来控制点击弹层外区域关闭
layer.open({
content:'啦啦啦啦，我是卖报的小画家',
btn:['按钮一','按钮二'],
closeBtn:1,
shade:0.8,
shadeClose:true,
});time-自动关闭所需毫秒
类型:Number,默认:0-不会自动关闭;想自动关闭时可以time:5000,即代表5秒后自动关闭,注意单位是毫秒
layer.open({
content:'啦啦啦啦，我是卖报的小画家',
btn:['按钮一','按钮二'],
closeBtn:1,
shade:0.8,
shadeClose:true,
time:2000,
});id - 用于控制弹层唯一标识
类型:String,默认:空字符;设置该值后不管是什么类型的层都只允许同时弹出一个,一般用于页面层和iframe层模式
layer.open({
content:'啦啦啦啦，我是卖报的小画家',
btn:['按钮一','按钮二'],
closeBtn:1,
shade:0.8,
shadeClose:true,
time:2000,
id:'aaa',
});anim-动画
类型:Number,默认:0;我们的出场动画全部采用CSS3,即除了ie6-9其它所有浏览器都是支持的;目前anim可支持的动画类型有0-6,(请注意:3.0之前版本用的shift参数)
layer.open({
content:'啦啦啦啦，我是卖报的小画家',
btn:['按钮一','按钮二'],
closeBtn:1,
shade:0.8,
shadeClose:true,
id:'aaa',
anim:1,
});maxmin-最大最小化
类型:Boolean,默认:false;该参数值对type:1和type:2有效;默认不显示最大小化按钮,需要显示配置maxmin:true即可
layer.open({
type:1,
content:'啦啦啦啦，我是卖报的小画家',
btn:['按钮一','按钮二'],
closeBtn:1,
shade:0.8,
shadeClose:true,
id:'aaa',
anim:1,
maxmin:true,
});fixed-固定
类型:Boolean,默认:true;即鼠标滚动时层是否固定在可视区域;如果不想设置fixed:false即可
layer.open({
type:1,
content:'啦啦啦啦，我是卖报的小画家',
btn:['按钮一','按钮二'],
closeBtn:1,
shade:0.8,
shadeClose:true,
id:'aaa',
anim:1,
maxmin:true,
fixed:false,
});resize-是否允许拉伸
类型:Boolean,默认:true;默认情况下可以在弹层右下角拖动来拉伸尺寸;如果对指定的弹层屏蔽该功能设置false即可;该参数对loading/tips层无效
layer.open({
type:1,
content:'啦啦啦啦，我是卖报的小画家',
btn:['按钮一','按钮二'],
closeBtn:2,
shade:0.8,
shadeClose:true,
anim:1,
maxmin:true,
fixed:true,
});scrollbar-是否允许浏览器出现滚动条
类型:Boolean,默认:true;默认允许浏览器滚动,如果设定scrollbar:false则屏蔽
layer.open({
type:1,
content:'啦啦啦啦，我是卖报的小画家',
btn:['按钮一','按钮二'],
closeBtn:2,
shade:0.8,
shadeClose:true,
anim:1,
maxmin:true,
fixed:true,
scrollbar:false,
});maxWidth-最大宽度
默认:360;只有当area:'auto'时maxWidth的设定才有效。
layer.open({
area:'auto',
type:1,
content:'啦啦啦啦，我是卖报的小画家',
btn:['按钮一','按钮二'],
closeBtn:2,
shade:0.8,
shadeClose:true,
anim:1,
fixed:true,
scrollbar:false,
maxWidth:300,
});zIndex-层叠顺序
默认:19891014(贤心生日),一般用于解决和其它组件的层叠冲突
move-触发拖动的元素
类型:String/DOM/Boolean,默认:'.layui-layer-title'-触发标题区域拖拽;如果你想单独定义,指向元素的选择器或者DOM即可,如move:'.mine-move',你还配置设定move:false来禁止拖拽
layer.open({
area:'auto',
type:1,
content:'啦啦啦啦，我是卖报的小画家',
btn:['按钮一','按钮二'],
closeBtn:2,
shade:0.8,
shadeClose:true,
anim:1,
fixed:true,
scrollbar:false,
maxWidth:300,
move:false,
});moveOut-是否允许拖拽到窗口外
类型:Boolean,默认:false-只能在窗口内拖拽;如果你想让拖到窗外,那么设定moveOut:true即可
moveEnd-拖动完毕后的回调方法
类型:Function,默认:null;默认不会触发moveEnd,如果需要设定moveEnd:function(){}即可
layer.open({
area:'auto',
type:1,
content:'啦啦啦啦，我是卖报的小画家',
btn:['按钮一','按钮二'],
closeBtn:2,
shade:0.8,
shadeClose:true,
anim:1,
fixed:true,
scrollbar:false,
maxWidth:300,
moveOut:true,
moveEnd:function(){
alert(1);
}
});tips-方向和颜色
类型:Number/Array,默认:2,tips层的私有参数,支持上右下左四个方向,通过1-4进行方向设定,如tips:3则表示在元素的下面出现;有时你还可能会定义一些颜色,例如tips:[1,'#c00']
tipsMore-是否允许多个tips
类型:Boolean,默认:false;允许多个意味着不会销毁之前的tips层,通过tipsMore:true开启
layer.open({
type: 4,
content: ['内容aa', '#ida'],
});
layer.open({
type: 4,
content: ['内容', '#id'],
tips: [1, '#c00'],
tipsMore:true,
});下面来系统的了解下layer的回调方法，还是以layer.open为例
success-层弹出后的成功回调方法
类型:Function,默认:null;当需要在层创建完毕时即执行一些语句，可以通过该回调;success会携带两个参数,分别是当前层DOM/当前层索引
layer.open({
content: '测试弹框加载成功回调',
success: function(layero, index){
console.log(layero, index);
}
});yes-确定按钮回调方法
类型:Function,默认:null;该回调携带两个参数,分别为当前层索引/当前层DOM对象
layer.open({
content: '测试点击确定按钮回调',
yes: function(index, layero){
console.log(layero, index);
layer.close(index); //如果设定了yes回调，需进行手工关闭
}
}); cancel-右上角关闭按钮触发的回调
类型:Function,默认:null;该回调只携带当前层索引一个参数,无需进行手工关闭;如果不想关闭return false即可
layer.open({
content: '测试点击确定按钮回调',
yes: function(index, layero){
console.log(layero, index);
layer.close(index);
},
cancel: function(index){
if(confirm('确定要关闭么')){
layer.close(index)
}
return false;
}
}); end-层销毁后触发的回调
类型:Function,默认:null;无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数
layer.open({
content: '测试点击确定按钮回调',
yes: function(index, layero){
console.log(layero, index);
layer.close(index);
},
cancel: function(index){
if(confirm('确定要关闭么')){
layer.close(index)
}
return false;
},
end:function(){
alert('我就这么离开了');
}
}); full/min/restore-分别代表最大化/最小化/还原后触发的回调
类型:Function,默认:null;携带一个参数,即当前层DOM
layer.open({
type:1,
content: '测试点击确定按钮回调',
maxmin:true,
yes: function(index, layero){
console.log(layero, index);
layer.close(index);
},
cancel: function(index){
if(confirm('确定要关闭么')){
layer.close(index)
}
return false;
},
end:function(){
alert('我就这么离开了');
},
full:function(){
console.log('长大好辛苦，不过长个真好');
},
min:function(){
console.log('看不见看不见我');
},
restore:function(layero){
console.log(layero);
},
}); 全局设置
分类看完了弹框之后来看下弹框的整体设置,可以节省不少代码哦
初始化全局配置
layer.config(options)-初始化全局配置,这是一个可以重要也可以不重要的方法;重要的是它的权利很大,尤其在模块化加载layer时,它不仅可以配置一些诸如路径/加载的模块,甚至还可以决定整个弹层的默认参数;而说它不重要,是因为多数情况下你似乎不那么需要它;但你还是有必要认识下这位伙计
如果您是采用seajs或者requirejs加载layer，你需要执行该方法来完成初始化的配置
layer.config({
path: '/res/layer/' //layer.js所在的目录,可以是绝对目录也可以是相对目录
}); //这样的话layer就会加载一些它所需要的配件,比如css等;当然,你即便不用seajs或者requirejs,也可以通过上述方式设定路径 如果你是采用