Layer ----- 弹出层、弹框

模块加载名称:layer,layer独立组件官网:layer.layui.com

layer可以独立使用,也可以通过Layui模块化使用。按照实际需求来选择。只使用layer,你可以去layer独立组件官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js。如果你使用的是Layui,那么你直接在官网下载layui框架即可,无需引入jQuery和layer.js,但需要引入layui.csslayui.js

,解压后可放在extend下,

layer提供了5种层类型(type)。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。

-----------我是分割线-----------
一:layer.open(options) 原始核心方法。按钮btn:
layer.open({
type:0, //默认为0
content:'<b>你确定?</b>',
btn:['我确定','取消','不确定'],
closeBtn:'1', //两种关闭按钮的风格 1,2 不显示:0
btnAlign: 'l', //按钮对齐方式‘l,r,c’
yes:function(index,layero){alert('你确定');layer.close(index)},//如果设定了yes回调,需进行手工关闭,
btn2:function(index,layero){alert('你拒绝');return false}, //默认关闭,如果不想关闭,return false;
btn3:function(index,layero){alert('你不确定')},
cancel:function(index){ //右上角关闭按钮
if (confirm('确定要关闭吗?')){
layer.close(index);
}
return false;
},
end:function(){alert('弹窗没有啦~')} //无论是确认还是取消,只要层被销毁了,end都会执行,
});
信息框弹层下,btn默认是一个确定按钮,你可以自定义多个按钮,和这些按钮的回调,按钮一和按钮二默认为yes和cancle;



---------------我是分割线----------------------------------------
二:layer.confirm(content,options,yes,cancel) 询问框
layer.confirm('是真的吗?', {
icon:5, //图标。信息框和加载层的私有参数 信息框0-6,加载层0-2
title:'请你看清楚', //层标题
btn:['当然','骗你的','你猜'],
btnAlign:'r',
btn3:function(index,layero){alert('我不猜')}
},
function(index,layero){ //按钮一的回调
layer.style(index,{ //layer.style(index,cssStyle)参数index为层的索引,重新定义层的样式
width:'100px',
top:'10px'
});
layer.title('好吧我改变了标题',index); //layer.title('title....',index) 改变层的标题
alert('我相信你');
layer.close(index); //手动关闭
},
function(index){alert('你是骗子')} //按钮二的回调
);
你需要把交互的语句放在回调体中,它的参数是自动补齐的。


--------------------我是分割线-----------------------
三:layer.prompt(option,yes) 输入层
layer.prompt({
formType:2,
value:'我喜欢', //初始值
title:'你喜欢吗?', //标题
area:['150px','50px'],
maxlength:140 //可输入文本的最大长度,默认500
},function(value,index,elem){ //参数自动补齐,value表单值,index索引,elem表单元素
alert("你的答案是"+value);
layer.close(index);
});


------------我是分割线-----------------------------
四:layer.tab(options) tab层
layer.tab({
area:['500px','300px'],
tab:[{
title:'标题一',
content:'内容一不拉不拉'
},{
title:'标题二',
content:'内容二不拉不拉'
},{
title:'标题三',
content:'内容三不拉不拉'
}]
});


------------------分割线----------------------------------------------------------------------
五:layer.tips(content,follow,options) tips层
layer.tips("名字只能是中英文","#sName",{tips:[2,'#FF00FF'],tipsMore: true});   它能灵活地判断它应该出现在哪边。默认是在元素右边弹出 1--4  ,tipsMore 是否允许出现多个tips


-------------------------------------------------分割线-----------------------
六:layer.load(icon,options) 加载层
  layer.load(2,{time:5*1000});        //load默认是不会自动关闭的,因为你一般会在ajax回调体中关闭它。设置最长等待时间


七:layer.ready(callback) 初始化就绪
layer.ready(function(){   //当你在页面一打开就要执行弹层时,你最好是将弹层放入ready方法中,如:
layer.msg("欢迎你");
})


-------------------------------------分割线----------------------------------
八: layer.setTop(layero); 置顶当前窗口
layer.open({
type: 2, //ifram层
anim:1, //动画采用CSS3,0--6种形式 除了ie6-9,其它所有浏览器都是支持的
shade:[0.6,'grey'], //弹层外区域。如果你不想显示遮罩,可以shade: 0
shadeClose:true, //点击弹层外区域可以关闭弹层
fixed:false, //鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可
resize:false, //是否允许右下角拉伸
move:false, //默认触发标题区域可拖拽,false不可拖动,也可自定义拖拽地方 '#tableone'
moveOut:false, //是否允许拖拽到窗口外
moveEnd:function(){alert('你把我拖到这里了')} //拖动完毕后的回调

area: '500px', //自定义文本域宽高 ['800px', '350px']
maxmin: true, //最大化最小化,对type12有用,默认false
content: 'http://www.layui.com',
zIndex: layer.zIndex,
success: function(layero){ //层成功弹出后的回调
layer.setTop(layero); //当你的页面有很多很多layer窗口,你需要点击某个窗口,该窗体就置顶在上面,那么setTop可以来轻松实现
},
full:function(layero){alert("你把我最大化了")}, //最大化后的回调
min:function(layero){alert("你把我最小化了")}, //最小化后的回调
restore:function(layero){alert("你把我还原了")} //还原后的回调
});


-------------------------------------------------分割线--------------------------------------------------------
九:layer.closeAll(type) 关闭所有层
  layer.closeAll();
layer.closeAll('dialog'); //关闭所有信息框
layer.closeAll('page');
layer.closeAll('iframe');
layer.closeAll('loading');
layer.closeAll('tips');
-----------------------------------------------我是分割线-------------------------------
十:layer.config() //初始化全局配置 配置层默认的基础参数
layer.config({
anim:3,
skin:'layui-layer-lan'
})
----------------------------------------------------我是分割线--------------------------------
十一:layer.alert() 信息框
layer.alert('呵呵,我是个简单的提示');
layer.alert('我是有图标有回调的提示',
{icon:3},
function(index){
alert('需要手动关闭');layer.close(index)
}
);
---------------------------------------------我是分割线------------------------------------------
十二:layer.msg(content,options,end) 提示框
layer.msg('我是个丰富的提示框',
{icon:6,time:2000},
function(){
alert('我消失了吧');
}
);


----------------------------------------------我是分割线--------------------------------------------
十三:layer.style(index,cssStyle) 定义层样式
layer.style(index,{    //参数index为层的索引,重新定义层的样式
width:'100px',
top:'10px'
});
layer.title('好吧我改变了标题',index); //重新定义层的标题
layer.full()、layer.min()、layer.restore() // 一般用于在自定义元素上触发最大化、最小化和全屏
十:skin 样式类名
skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。目前layer内置的skin有:layui-layer-lanlayui-layer-molv。
layer.config({
skin: 'demo-class'
})
//CSS
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
十一:其他
maxWidth:360 //默认为360,只有当area:auto 时,该设定才有效
layer.photos()和自定义skin方法下回分解


posted @ 2020-07-13 18:17  Ao_min  阅读(55)  评论(0编辑  收藏