layer初步使用

type:基本层类型

layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)

content – 内容

content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。类型:String/DOM/Array.

btn – 按钮

信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn:’我知道了’,当你要定义两个按钮时,你可以btn: [‘yes’, ‘no’]。当然,你也可以定义更多按钮,比如:btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …],按钮1和按钮2的回调分别是yes和cancel,而从按钮3开始,则回调为btn3: function(){},以此类推。

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){
    //do something
    layer.close(index); //如果设定了yes回调,需进行手工关闭
  }
});

cancel – 右上角关闭按钮触发的回调

类型:Function,默认:null

该回调同样只携带当前层索引一个参数,无需进行手工关闭。如果不想关闭,return false即可,如:

//只有当点击confirm框的确定时,该层才会关闭
cancel: function(index){ 
  if(confirm('确定要关闭么')){
    layer.close(index)
  }
  return false; 
}

end – 层销毁后触发的回调

类型:Function,默认:null

无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。

layer.alert(content, options, yes) – 普通信息框
layer.confirm(content, options, yes, cancel) – 询问框
layer.msg(content, options, end) – 提示框
layer.load(icon, options) – 加载层
layer.tips(content, follow, options) – tips层
layer.close(index) – 关闭特定层

//当你想关闭当前页的某个层时
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的,每一种弹层调用方式,都会返回一个index
layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close即可
 
//如果你想关闭最新弹出的层,直接获取layer.index即可
layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
 
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

layer.closeAll(type) – 关闭所有层
layer.style(index, cssStyle) – 重新定义层的样式
layer.title(title, index) – 改变层的标题
layer.getChildFrame(selector, index) – 获取iframe页的DOM
layer.setTop(layero) -置顶当前窗口

//通过这种方式弹出的层,每当它被选择,就会置顶。
layer.open({
  type: 2,
  shade: false,
  area: '500px',
  maxmin: true,
  content: 'http://www.layui.com',
  zIndex: layer.zIndex, //重点1
  success: function(layero){
    layer.setTop(layero); //重点2
  }
});

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注