前端最好用弹框组件-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参数)
  });
}); 

直接从页面中获取

图片1 图片2

即时通信

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,也可以通过上述方式设定路径   

如果你是采用

你可能感兴趣的:(前端最好用弹框组件-layer)