您的位置:首页 > 产品设计 > UI/UE

layui弹出层layer

2018-11-27 21:07 351 查看

一、核心方法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'
}]
});

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: