layui弹出层layer

一、核心方法layer.open()

有type、title、content等一些与弹出层样式有关的属性
layer.open()基础属性
不管是使用哪种方式创建层,都是走layer.open(),创建任何类型的弹层都会返回一个当前层索引

var index = layer.open({
  content: 'test'
});
//拿到的index是一个重要的凭据,它是诸如layer.close(index)等方法的必传参数。     

二、初始化全局配置layer.config(options)

可以用来配置层的默认参数(作用之一)

layer.config({
  anim: 1, //默认动画风格
  skin: 'layui-layer-molv' //默认皮肤
  …
});

三、初始化就绪 layer.ready(content,options,yes)

当页面打开时就加载

layer.ready(function(){
  layer.msg('很高兴一开场就见到你');
});  

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

content是提示内容,options是基础参数,yes是回调函数

layer.alert(
			"回调加个图标",
			{icon: 1},
			function(index){
				layer.close(index)
			}
		)

在这里插入图片描述

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

类似layer.alert()

layer.confirm('是否删除?',{iocn: 3,title: '提示'},function(i){
			layer.clone(i);
		})

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

弹出一个提示框0.8s后自动关闭

layer.msg("这是提示框",{offset: 't',time: 800},function(i){
			console.log(i)
		})

七、加载层layer.load(icon,options)

load默认是不会自动关闭的,因为你一般会在ajax回调体中关闭它。也可以设置关闭时间

layer.load(2,{time: 1000});

八、提示语layer.tips(content,follow,options)

content是提示文本内容,follow是需要提示的标签id,options是基础参数

layer.tips("这是提示语",'#btn4',{tips: 1})

九、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.closeAll(); //疯狂模式,关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层  

十一、layer.style(index, cssStyle) - 重新定义层的样式

//重新给指定层设定width、top等
layer.style(index, {
  width: '1000px',
  top: '10px'
});    

十二、layer.title(title, index) - 改变层的标题

layer.title('标题变了', index)

十三、layer.prompt(options, yes) - 输入层

options不仅可支持传入基础参数,还可以传入prompt专用的属性。当然,也可以不传。yes携带value 表单值index 索引elem 表单元素

//prompt层新定制的成员如下
{
  formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本)
  value: '', //初始时的值,默认空字符
  maxlength: 140, //可输入文本的最大长度,默认500
}
 
//例子1
layer.prompt(function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});
 
//例子2
		layer.prompt({
			formType: 2,
			value:'-',
			title:'备注'
		},function(v,i,e){
			console.log(v);
			layer.clone(i);
		})

十四、layer.tab(options) - tab层

layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1', 
    content: '内容1'
  }, {
    title: 'TAB2', 
    content: '内容2'
  }, {
    title: 'TAB3', 
    content: '内容3'
  }]
});  

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值