最近在做公司的官网,其中有用到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层