简介
layer 是layui的一个弹出层组件,但是可以作为独立组件使用。单独使用去layer官网下载独立组件包,并且需引入jQuery1.8以上版本。
引入好layer.js后,直接用即可
<script src="layer.js"></script>
<script>
layer.msg('hello');
</script>
基础参数
-
type:类型Number,0(信息框,默认),1(页面层),2(iframe层),3(加载层),4(tips层)
-
title:类型String/Array/Boolean,普通字符串改变文本,数组形式的第二个参数是css样式,布尔值是不显示标题
title: '我是标题' title: ['文本', 'font-size:18px;'] title: false
-
content:类型String/DOM/Array,content的内容需要根据type类型变化。
/!* 如果是页面层 */ layer.open({ type: 1, content: '传入任意的文本或html' //这里content是一个普通的String }); layer.open({ type: 1, content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响 }); //Ajax获取 $.post('url', {}, function(str){ layer.open({ type: 1, content: str //注意,如果str是object,那么需要字符拼接。 }); }); /!* 如果是iframe层 */ layer.open({ type: 2, content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no'] }); /!* 如果是用layer.open执行tips层 */ layer.open({ type: 4, content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM });
-
skin:类型String,不仅可以传入内置的样式class名,还可以传入自定的class,目前layer内置的skin有:layui-layer-lanlayui-layer-molv。
-
area:类型String/Array,默认情况下宽高是自适应的,想改变宽可以
area: '500px'
,宽高都要时area: ['500px','300px']
。 -
offset:类型String/Array,默认垂直水平居中
值 备注 offset: ‘auto’ 默认坐标,即垂直水平居中 offset: ‘100px’ 只定义top坐标,水平保持居中 offset: [‘100px’, ‘50px’] 同时定义top、left坐标 offset: ‘t’ 快捷设置顶部坐标 -
icon:类型Number,信息框和加载层的私有参数。-1(信息框),0(加载层)。信息框有默认图标0-6,加载层有0-2。
-
bth:类型String/Array,默认’确认’。定义多个按钮可以
btn: ['按钮1', '按钮2', '按钮3', …]
,按钮1的回调是yes,按钮2开始是btn2: function(){}
//eg2 layer.open({ content: 'test' ,btn: ['按钮一', '按钮二', '按钮三'] ,yes: function(index, layero){ //按钮【按钮一】的回调 } ,btn2: function(index, layero){ //按钮【按钮二】的回调 //return false 开启该代码可禁止点击该按钮关闭 } ,btn3: function(index, layero){ //按钮【按钮三】的回调 //return false 开启该代码可禁止点击该按钮关闭 } ,cancel: function(){ //右上角关闭回调 //return false 开启该代码可禁止点击该按钮关闭 } });
-
btnAlign:类型String,按钮排列,默认右对齐。有’l’,‘c’,'r’三种,分别是左中右。
-
closeBtn:类型String/Boolean,右上角的关闭x按钮,有两种风格1和2,0是个奇怪的东西,可以用false表示不显示。
-
shade:类型String/Array/Boolean,默认0.3。即弹出层外的区域变暗,默认是0.3透明度的黑(’#000’),定义别的颜色可以
shade: [0.8, '#393D49']
,不显示遮罩可以shade: 0
。 -
shadeClose:类型Boolean,默认关闭。用于控制能否点击弹窗外关闭弹窗。
-
time:类型Number,默认0。自动关闭时间,单位毫秒(ms)。
-
id:类型String,设置该值后不管什么类型的弹窗都只允许弹出一个,常用于页面层和iframe层模式。
-
anim:类型Number,默认0。弹出动画,采用CSS3,有0-6七种模式,不想显示动画设置为-1。0就挺好的,别的适用于特殊场景。
-
isOutAnim:类型Boolean,默认true。关闭弹窗时的过度动画,可以设置false关闭。区别不是很大,本身动画就比较克制。
-
maxmin:类型Boolean,默认false。该参数仅对
type: 1
和type: 2
有效,添加最大最小化按钮。 -
fixed:类型Boolean,默认true。设定弹出窗口是否固定在屏幕中,不会随着滚轮移动。
-
resize:类型Boolean,默认true。是否允许通过右下角拉伸窗口。该参数对loading,tips层无效。
-
resizing:类型Function。监听窗口拉伸动作,当拉伸窗口时执行回调函数,函数参数是当前层的DOM对象
resizing: function(layero){ console.log(layero); }
-
scrollBar:类型Boolean,默认true。是否允许背景窗口滚动。
-
maxWidth,maxHeight:类型Number。只有当
area: 'auto'
时才生效。 -
zIndex:层叠顺序,用于解决与其他组件的层叠冲突。
-
move:类型String/DOM/Boolean,默认’layui-layer-title’。触发拖拽的元素,可以用指定元素选择器或DOM,还可以配置false来禁止拖拽。
-
moveOut:类型Boolean,默认false。是否允许拖拽到窗口外。
-
moveEnd:类型Function。拖动完毕后的回调方法,使用同上面的resizing。
-
tips:类型Number/Array,默认2。tips层的私有方法,从元素的上右下左四个方向出现,还可以定制颜色
tips: [1, '#c00']
。 -
tipsMore:类型Boolean,默认false。是否允许多个tips存在。
-
success:类型Function。在层创建完毕后的回调方法。携带参数分别是当前层DOM和当前层索引。
layer.open({ content: '测试回调', success: function(layero, index){ console.log(layero, index); } });
-
yes:类型Function。确定按钮的回调方法。携带参数分别是当前层索引和当前层DOM。
layer.open({ content: '测试回调', yes: function(index, layero){ //do something layer.close(index); //如果设定了yes回调,需进行手工关闭 } });
-
cancel:类型Function。右上角关闭按钮的回调方法,携带参数分别是当前层索引和当前层DOM。
cancel: function(index, layero){ if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭 layer.close(index) } return false; }
-
end:类型Function。层销毁后的回调方法,不管是确定还是关闭都调用。不携带参数。
-
full,min,restore:类型Function。最大化、最小化、还原的回调方法。携带一个参数,当前层DOM。
内置方法
-
layer.config(options):初始化全局配置。一个既可以重要也不重要的方法。平常不怎么用,但是很有用。
layer.config({ anim: 1, //默认动画风格 skin: 'layui-layer-molv' //默认皮肤 … });
-
layer.ready(callback):在需要页面一打开就出现弹层时,最好将弹层放在ready方法里。毕竟加载总需要时间。
//页面一打开就执行弹层 layer.ready(function(){ layer.msg('很高兴一开场就见到你'); });
-
layer.open(options):创建层的方法。options就是上面的基本参数。
-
layer.alert(content, options, yes):普通信息框。类似原生的弹窗,但是使用更加灵活,options就是基本参数。并且参数能够自动向左补齐(能跳过一些参数)。
//eg1 layer.alert('只想简单的提示'); //eg2 layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调,可以放在第三个参数中。 //eg3 layer.alert('有了回调', function(index){ //可以跳过第二个参数直接写回调函数 //do something layer.close(index); });
-
layer.confirm(content, options, yes, cancel):类似系统confirm但远胜confirm。需要把交互语句放在回调体里。同样是参数自动向左补齐。
//eg2 layer.confirm('is not?', function(index){ //do something layer.close(index); });
-
layer.msg(content, options, end):作者用心做的提示框。默认三秒后自动消失。参数自动补齐。
layer.msg('同上', { icon: 1, time: 2000 //2秒关闭(如果不配置,默认是3秒) }, function(){ //do something });
-
layer.load(icon, options):type:3的深度定制。load默认是不关闭的,因为一般在ajax回调体中关闭。
-
layer.tips(content, follow, options):type:4的深度定制。和msg一样低调,能够智能定位,知道该出现在哪里。默认是在元素右边弹出
//eg 2 $('#id').on('click', function(){ var that = this; layer.tips('只想提示地精准些', that); //在元素的事件回调体中,follow直接赋予this即可 }); //eg 3 layer.tips('在上面', '#id', { tips: 1 });
-
layer.close(index):关闭特定层。获取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():简单粗暴,关闭所有层。可以通过指定类型关闭特定类型。
layer.closeAll(); //疯狂模式,关闭所有层 layer.closeAll('dialog'); //关闭信息框 layer.closeAll('page'); //关闭所有页面层 layer.closeAll('iframe'); //关闭所有的iframe层 layer.closeAll('loading'); //关闭加载层 layer.closeAll('tips'); //关闭所有的tips层
-
layer.style(index, cssStyle):重新定义层的样式,对load层和tips层无效。
-
layer.title(title, index):更改层的标题。
-
layer.getChildFrame(selector, index):在当前页视图获取iframe页的DOM时使用。
-
layer.getFrameIndex(windowName):获取特定iframe层的索引,一般在iframe关闭自身时用到。
-
layer.iframeAuto(index):指定iframe层高度自适应。
-
layer.iframeSrc(index, url):重置特定iframe url。
-
layer.setTop(layero):在多个窗口打开时,通过点击窗体能置顶当前窗口。
-
layer.full()、layer.min()、layer.restore():在自定义元素上触发最大小化
其他内置层
- layer.prompt(options, yes): 输入层。参数自动向左补齐,yes方法携带参数
value 表单值
,index 索引
,elem 表单元素
//例子2 layer.prompt({ formType: 2, value: '初始值', title: '请输入值', area: ['800px', '350px'] //自定义文本域宽高 }, function(value, index, elem){ alert(value); //得到value layer.close(index); });
- layer.tab(options):tab层。只定义了一个成员
tab: []
,呈现出一个多标签的弹窗。layer.tab({ area: ['600px', '300px'], tab: [{ title: 'TAB1', content: '内容1' }, { title: 'TAB2', content: '内容2' }, { title: 'TAB3', content: '内容3' }] });
- layer.photos(options):相册层。支持传入json和直接读取页面图片两种方式。传入json需按照指定格式。photos还有个tab回调方法,切换图片时触发。
//HTML示例 <div id="layer-photos-demo" class="layer-photos-demo"> <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名"> <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名"> </div> <script> //调用示例 layer.photos({ photos: '#layer-photos-demo' ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数) ,tab: function(pic, layero){ console.log(pic) //当前图片的一些信息 } }); </script>