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参数)
});
}); 直接从页面中获取
<div id="layer-photos-demo" class="layer-photos-demo">
<img layer-pid="hja" layer-src="js/theme/default/icon.png" src="js/theme/default/icon.png" alt="图片1"> <!-- layer-pid可以省略 -->
<img layer-pid="hjb" layer-src="js/theme/default/icon-ext.png" src="js/theme/default/icon-ext.png" alt="图片2">
</div>
<script>
layer.photos({
photos: '#layer-photos-demo',
anim: 5,
tab: function(pic, layero){
alert(pic, layero) //当前图片的一些信息
}
});
</script> 即时通信
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的优先级更高
<style>
.demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
.demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
.demo-class .layui-layer-btn a{background:#333;}
.demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
</style>
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,也可以通过上述方式设定路径 如果你是采用<script src="?a.js&layer.js">这种合并的方式引入layer,则需要在script标签上加一个自定义属性merge="true"
<script src="?a.js&layer.js" merge="true"> //这样的话，layer就不会去自动去获取路径，但你需要通过以下方式来完成初始化的配置
layer.config({
path: '/res/layer/' //layer.js所在的目录，可以是绝对目录，也可以是相对目录
}); layer.config的作用远不止上述这样,它还可以配置层默认的基础参数
layer.config({
anim: 1, //默认动画风格
skin: 'layui-layer-molv' //默认皮肤
…
});
//此外,extend还允许加载拓展的css皮肤,如:
layer.config({
//如果是独立版的layer则将myskin存放在./skin目录下;如果是layui中使用layer,则将myskin存放在./css/modules/layer目录下
extend: 'myskin/style.css'
}); layer.ready(callback)-初始化就绪
我们的layer内置了轻量级加载器,所以根本不需要单独引入css等文件;但是加载总是需要过程的,当在页面一打开就要执行弹层时,最好是将弹层放入ready方法中
layer.ready(function(){
layer.msg('很高兴一开场就见到你');
}); layer.close(index)-关闭特定层
//每一种弹层调用方式都会返回一个index,此时只需要把获得的index赋予layer.close即可
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
layer.close(index);
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭 layer.closeAll(type)-关闭所有层
如果不想去获取index而只想关闭,那么closeAll就派上了用场;如果不指向层类型的话会销毁掉当前页所有的layer层;当然如果你只想关闭某个类型的层,你可以:
layer.closeAll(); //疯狂模式，关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层 layer.style(index, cssStyle)-重新定义层的样式
该方法对loading层和tips层无效,参数index为层的索引,cssStyle允许你传入任意的css属性
layer.style(index, {
width: '1000px',
top: '10px'
}); layer.title(title,index)-改变层的标题
使用方式:layer.title('标题变了',index)
layer.getChildFrame(selector,index)-获取iframe页的DOM
试图在当前页获取iframe页的DOM元素时可以用此方法,selector即iframe页的选择器
layer.open({
type: 2,
content: 'http://www.yonglibao.com',
success: function(layero, index){
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
console.log(body.html()) //得到iframe页的body内容
body.find('input').val('Hi，我是从父页来的')
}
}); layer.getFrameIndex(windowName)-获取特定iframe层的索引
此方法一般用于在iframe页关闭自身时用到
layer.open({
type: 2,
content: 'http://www.yonglibao.com',
end:function(){
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
}
});
layer.iframeAuto(index)-指定iframe层自适应
调用该方法时iframe层的高度会重新进行适应
layer.iframeSrc(index, url)-重置特定iframe url
不怎么常用,使用方式:layer.iframeSrc(index, 'http://www.baidu.com')
layer.setTop(layero)-置顶当前窗口
非常强大的一个方法,虽然很少用,但当页面有很多layer窗口,需要像Window窗体那样点击某个窗口该窗体就置顶在上面,setTop就可以来轻松实现;它采用巧妙的逻辑使这种置顶的性能达到最优
layer.open({ //通过这种方式弹出的层，每当它被选择，就会置顶
type: 2,
shade: false,
area: '500px',
maxmin: true,
content: 'http://www.yonglibao.com',
zIndex: layer.zIndex, //重点1
success: function(layero){
layer.setTop(layero); //重点2
}
}); layer.full()/layer.min()/layer.restore()-手工执行最大小化
一般用于在自定义元素上触发最大化、最小化和全屏
手机端背景固定的问题
弹框没有滚动条
success:function(){ //限制背景和弹框的touchmove事件
$('.layui-layer-shade,.layui-layer').on('touchmove',function(e){
e.preventDefault(); //阻止默认行为
});
},弹框有滚动条
success:function(){
var top = $(window).scrollTop();
$('.layui-layer-shade').on('touchmove',function(e){
e.preventDefault();
});
$('.layui-layer').on('touchmove',function(e){
$('body').css({'top':-top+'px','position':'fixed'});
});
},现在实现了弹框滚动背景也不动的效果，但是当我们会发现当我们关掉弹框的时候，body依然无法滑动，所以我们还需要在弹框关闭的时候把body的样式复原，并且保证滚动条停留在tan'kuan弹框弹出前的位置
var top = 0;
layer.open({
success:function(){
top = $(window).scrollTop();
$('body').css({'top':-top+'px','position':'fixed'});
$('.layui-layer-shade').on('touchmove',function(e){
e.preventDefault();
});
},
end:function(){
$('body').css({'position':''});
$(window).scrollTop(top);
}
})不知道大家有没有发现layer必须基于jquery，如果你没有提前引入jquery，她就会很happy的给你报错：
那么下面我来为大家介绍另一个文件
layer for mobile
我不知道大家有没有注意到,到目前为止,你引入的这个叫做layer.js的东东一直都是基于jquery的,这个在pc端没有什么问题,但是却会让移动端使用其他框架的同学们很忧伤;下面就让我们来了解另一个:layer.m.js
layer.m.js是主要针对移动端的,所以他比pc版layer要简洁很多-只提供一个核心调用方法,即:layer.open(options);各类型的层都可以借助下面高度灵活的参数接口对layer.open进行二次封装
参数
即核心接口:layer.open(options)中的options：
type - 设置弹层的类型
类型:Number,默认:0(0表示信息框,1表示页面层,2表示加载层)
content - 设置弹层内容
类型:String,为必选参数
title - 设置弹层标题
类型:String或Array,默认:空值,可以为字符串或者数组,为空则不显示
layer.open({
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
});time - 控制自动关闭层所需秒数
类型:Number,默认不开启,支持整数和浮点数,单位为秒
style - 自定义层的样式
类型:String,非常实用
layer.open({
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
style: 'border:none; background-color:#78BA32; color:#fff;',
});skin - 设定弹层显示风格
类型:String,目前支持footer(即底部对话框风格)/msg(普通提示)两种风格
layer.open({
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
style: 'border:none; background-color:#78BA32; color:#fff;',
skin:'footer',
});className - 自定义一个css类
类型:String,用于自定义样式
layer.open({
className: 'popuo-login',
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
style: 'border:none; background-color:#78BA32; color:#fff;',
skin:'footer',
});btn - 按钮
类型:String/Array,不设置则不显示按钮,如果只需要一个按钮则btn:'按钮',如果有两个则:btn:['按钮一','按钮二']
layer.open({
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
style: 'border:none; background-color:#78BA32; color:#fff;',
skin:'msg',
btn:['按钮一','按钮二','按钮三'],
});anim - 动画类型
类型:String/Boolean,可支持的支持动画配置:scale(默认)/up(从下往上弹出)/如果不开启动画设置false即可
layer.open({
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
style: 'border:none; background-color:#78BA32; color:#fff;',
skin:'msg' ,
anim:'up',
});shade - 控制遮罩展现
类型:String/Boolean,默认:true,该参数可允许你是否显示遮罩,并且定义遮罩风格
layer.open({
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
style: 'border:none; background-color:#78BA32; color:#fff;',
anim:'up',
shade: 'background-color: rgba(0,0,0,.2);',
});shadeClose
类型:Boolean,默认:true,是否点击遮罩时关闭层
layer.open({
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
style: 'border:none; background-color:#78BA32; color:#fff;',
skin:'msg',
shadeClose:false,
});fixed - 是否固定层的位置
类型:Boolean,默认:true
layer.open({
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
style: 'border:none; background-color:#78BA32; color:#fff;',
skin:'msg',
shadeClose:false,
fixed:false,
});top - 控制层的纵坐标
类型:Number,默认:无,一般情况下不需要设置,因为层会始终垂直水平居中,只有当fixed:false时top才有效
layer.open({
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
style: 'border:none; background-color:#78BA32; color:#fff;',
skin:'msg',
shadeClose:false,
fixed:false,
top:'100px',
});success - 层成功弹出层的回调
类型:Function,该回调参数返回一个参数为当前层元素对象
layer.open({
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
style: 'border:none; background-color:#78BA32; color:#fff;',
skin:'msg',
shadeClose:false,
fixed:false,
top:'100px',
success: function(elem){
console.log(elem);
}
});yes
类型:Function,点确定按钮触发的回调函数,返回一个参数为当前层的索引
layer.open({
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
style: 'border:none; background-color:#78BA32; color:#fff;',
skin:'msg',
shadeClose:false,
fixed:false,
top:'100px',
success: function(elem){
console.log(elem);
},
yes: function(index){
alert('点击了是')
layer.close(index)
},
});no
类型:Function,点取消按钮触发的回调函数
layer.open({
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
style: 'border:none; background-color:#78BA32; color:#fff;',
skin:'msg',
shadeClose:false,
fixed:false,
top:'100px',
success: function(elem){
console.log(elem);
},
yes: function(index){
alert('点击了是')
layer.close(index)
},
no: function(index){
alert('点击了否')
layer.close(index)
},
});end
类型:Function,层彻底销毁后的回调函数
layer.open({
title:['我是标题','background-color:#f00'],
content:'我是内容',
type:1,
style: 'border:none; background-color:#78BA32; color:#fff;',
skin:'msg',
shadeClose:false,
fixed:false,
top:'100px',
success: function(elem){
console.log(elem);
},
yes: function(index){
alert('点击了是')
layer.close(index)
},
no: function(index){
alert('点击了否')
layer.close(index)
},
});其它内置方法/属性
layer.v
返回当前使用的layer mobile版本号
layer.close(index)
用于关闭特定层，index为该特定层的索引
layer.closeAll()
关闭页面所有layer的层
虽然layer.m.js功能比较少，但胜在不需要依赖于jquery