layer插件

最近在做公司的官网，其中有用到layer这款插件，以前没有接触过，不过学下来觉得好用好学。下面分享一下我的学习心得。

　　layer是web弹出层组件。在官网下载好layer后，把他部署到你的项目文件中（不能去挪动layer里面的文件结构，因为它们是不可拆散的组合）。你不用去管其他文件是干嘛的，只需关心layer.js,当然layer是基于jQuery的，你需要在引入layer之前引入jquery1.8或者以上版本。

一.基础参数：

 

1.type——基础类型层（number类型值，默认0）

0：信息框　　1：页面层　　2：iframe层　　3：加载层　　4：tips层

 

2.title——弹出层标题

title:"标题内容"　　title:['标题内容','font-size:18px;']　　title:false(不显示标题）

 

3.content——弹出框内容

content：'内容’　　content："<div>hello world</div>'

 

4.area——弹出框的宽高

area:'500px'只设置宽　　area:['500px','300px']设置宽高

 

5.icon——弹出层图标（只适用于信息框和加载层）

信息框的取值范围：0~6　　加载层的取值范围：0~2

 

6.btn——弹出层按钮设置（默认：确认）

btn:'yes'　　btn:['yes'.'no']

 

7.closeBtn——弹出层关闭按钮（默认：1）

closeBtn:0不显示　　closeBtn:2

 

8.shade——除了弹出层其他部分（默认：0.3）

shade:[0.8,'#393D49']换色　　shade:0不显示

 

9.shadeClose——点击除了弹出层其他部分的效果（默认：false)

控制弹出层的关闭（当点击除了弹出层其他部分）

shadeClose:true点击关闭　　shadeClose:false点击不关闭

 

10.time——弹出层自动关闭所需时间（毫秒为单位）

 

 

二.常用方法

 

1.layer.open(options)最核心的方法

options:基础参数

layer.open({content: '内容'})

 

2.layer.alert(content,options,yes)信息框

参数：

content: 内容，

option: 基础参数

yes 点击确定按钮回调函数

layer.alert('内容',{icon:1},function(index,layerDom){});

 

3.layer.confirm(content,option,yes,cancel)询问层

参数：

cancel:取消按钮回调函数

 

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

参数：

end:层销毁后触发回调

 

5.layer.load(icon,option)加载层

 

6.layer.tips(content,follow,options)tip层

 

7.layer.title(title,index)改变层的标题

 

8.layer.tab(options)tab层

 

转载于:https://www.cnblogs.com/it-body/p/6592092.html