layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。
在与同类弹出层插件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer(已被715357人次关注)。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。
layer遵循LGPL协议,将永久性提供无偿服务。历经两年,截至到2014年7月5号,已运用在15万家web平台,其中包括中国联通、蚂蚁短租、phpyun、中国网等知名网站,如果您有大型项目也在使用layer,您可以联系作者,以便在此展现案例,也为您的品牌推广尽一些绵薄之力。
layer官网:http://sentsin.com/jquery/layer/
layer官网文档:http://sentsin.com/jquery/layer/api.html
触发弹层的事件可自由绑定,如: $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码: 【信息框】: layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两种风格。 【询问框】: $.layer({ shade: [0], area: ['auto','auto'], dialog: { msg: '您是如何看待前端开发?', btns: 2, type: 4, btn: ['重要','奇葩'], yes: function(){ layer.msg('重要', 1, 1); }, no: function(){ layer.msg('奇葩', 1, 13); } } }); //还可用layer.confirm()快捷调用 【页面层一】 $.layer({ type: 1, shade: [0], area: ['auto', 'auto'], title: false, border: [0], page: {dom : '.layer_notice'} }); 【页面层二】 var pageii = $.layer({ type: 1, title: false, area: ['auto', 'auto'], border: [0], //去掉默认边框 shade: [0], //去掉遮罩 closeBtn: [0, false], //去掉默认关闭按钮 shift: 'left', //从左动画弹出 page: { html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background-color:#eee;"><p>我从左边来,我自定了风格。</p><button id="pagebtn" class="btns" onclick="">关闭</button></div>' } }); //自设关闭 $('#pagebtn').on('click', function(){ layer.close(pageii); }); 【iframe层一】 $.layer({ type: 2, shadeClose: true, title: false, closeBtn: [0, false], shade: [0.8, '#000'], border: [0], offset: ['20px',''], area: ['1000px', ($(window).height() - 50) +'px'], iframe: {src: 'http://f2e.sentsin.com/chat'} }); 【iframe层二】 layer.tips('5秒后右下角窗口自动关闭,并生成一个新的iframe', this, { time: 5, maxWidth: 260 }); $.layer({ type: 2, closeBtn: false, shadeClose: true, shade: [0.1, '#fff'], border: [0], time: 5, iframe: { src: 'test/guodu.html' }, title: false, area: ['300px','250px'], shift: 'right-bottom', end: function(){ $.layer({ type : 2, title: '贤心博客 - sentsin.com', shadeClose: true, maxmin: true, fix : false, area: ['1024px', 500], iframe: { src : 'http://sentsin.com/' } }); } }); 【加载层一】 layer.load(3); 【加载层二】 layer.load('加载带文字', 3); 【tips层一】 layer.tips('tips的样式并非是固定的,您可自定义外观。', this, { style: ['background-color:#78BA32; color:#fff', '#78BA32'], maxWidth:185, time: 3, closeBtn:[0, true] }); 【tips层二】 layer.tips('默认没有关闭按钮', this , {guide: 1, time: 2}); 【输入/文件层】 //普通文本 layer.prompt({title: '您的名字?'}, function(name){ alert(name); }); //密码文本 layer.prompt({title: '输入任何口令,并确认',type: 1}, function(pass){ alert(pass); }); //文件上传 layer.prompt({title: '随便上传个东东,并确认',type: 2}, function(file){ alert(file); }); //多行文本 layer.prompt({title: '随便写点啥,并确认',type: 3}, function(val){ alert(val); }); 【tab层】 layer.tab({ area: ['1000px', '500px'], data: [ {title: 'Say', content:'Hi,Main'}, {title: '无题', content:'支持html传入'} ] }); 【相册层】 //此处为异步请求模式,具体的json格式,请等待文档更新。或者你直接通过请求看photos.json var conf = {}; $.getJSON('ajax地址', {}, function(json){ conf.photoJSON = json; //保存json,以便下次直接读取内存数据 layer.photos({ html: '这里传入自定义的html,也可以不用传入(这意味着不会输出右侧区域)。相册支持左右方向键、Esc关闭', json: json }); });
键: 值 | 描述 |
下表的属性都是默认值,您可在调用时按需重新配置,他们可帮助你实现各式各样的风格。如是调用: $.layer({键: 值, 键: 值, …}); | |
type: 0 | 层的类型。0:信息框(默认),1:页面层,2:iframe层,3:加载层,4:tips层。
此为重要参数,不同类型层的总开关,若为type:0则不需要配置,其它类型层在调用时必须设置type。 |
title: '信息' |
控制默认标题栏。
如想自定义标题样式,可以 title: ['标题', 'background:#c00;'] //第二个参数可书写任意css 如不想显示标题栏,配置title: false 即可 |
maxmin: false |
是否输出窗口最小化/全屏/还原按钮。
如需要开启,设置maxmin: true 即可 此功能为layer1.8开始新增 |
offset: ['', ''] | 控制层坐标。
offset的值分别是: [纵坐标, 横坐标],默认为垂直水平居中 如果您要设定纵坐标,可以:offset:['200px', '']/td> |
area: ['310px', '130px'] | 控制层宽高。
area值分别为:[宽度, 高度] 当设置为auto时,意味着采用自适应(iframe层不能设置auto), 对于宽度,并不推荐您设置auto。 |
border: [10, 0.3, '#000'] | 控制层的边框。
border的值分别为:[边框大小, 透明度, 颜色, layer1.8之前需在此处加true] 如果您不想显示border,设置 border: [0] 即可 |
shade: [0.5, '#000'] | 控制遮罩。
值分别是:[遮罩透明度, 遮罩颜色, layer1.8之前需在此处加true] 如果不想显示遮罩,配置shade: [0]即可 |
shadeClose: false | 用来控制点击遮罩区域是否关闭层。
若开启,设为true即可 |
closeBtn: [0, true] | 控制层右上角关闭按钮。
closeBtn的值分别为: [关闭按钮的风格(支持0和1), true] 若不想显示关闭按钮,配置 closeBtn: false即可 |
time: 0 | 自动关闭等待秒数,整数值。
0表示不自动关闭,若3秒后自动关闭,time: 3即可 |
fix: true, | 用于设定层是否不随滚动条而滚动,固定在可视区域。 |
move: '.xubox_title' | 设定某个元素来实现对层的拖拽。
值为:用来拖拽的元素选择器 若不想拖拽,move: false即可 |
moveOut: false | 用于控制层是否允许被拖出可视窗口外 |
moveType: 0 | 用于配置拖拽类型(layer1.7之前版本不支持)
默认为引导式拖动层,若值设为1,则直接拖动层 |
bgcolor: '#fff' | 用于控制层的背景色
如果不想设置任何颜色,设置空字符即可。但是对于type:0的对话框层而言,始终都是白色 |
zIndex: 19891014 | 控制层堆叠顺序(即css的z-index)。整数值。
合理设置它,可以避免与其它插件的层级冲突 |
maxWidth: 400 | 最大宽度。整数值。
当area宽度设为auto时才有用。 |
fadeIn: 300, | 用于控制层渐显弹出(layer1.7之前版本不支持)
值为毫秒数 |
btns: 1, | 按钮的个数。提供了0-2的选择,设置0表示不输出按钮
|
btn: ['确定', '取消'], | [按钮一的文本值 , 按钮二的文本值]
必须btns值大于0才有效 |
shift: '', | 用于控制动画弹出
有七种选择:左上(left-top),上(top), 右上(right-top),右下(right-bottom),下(bottom),左下(left-bottom),左('left')。 如shift:'top' 表示从上动画弹出 |
dialog: { type: 3, msg: '' } |
信息框层模式提供的私有参数。使用时,按需配置即可
type: 图标类型,提供了0-16的选择,也许有你喜欢的。 设置-1不显示图标 msg: 信息框内容,重要参数 |
page: { dom: '#id', html: '', url: '', } |
页面层模式私有参数。
dom: 页面已存在的选择器 html: 直接传入的html字符串。 url: ajax请求地址。 ok: ajax请求完毕后执行的回调,datas是异步传递过来的值。 需要特别注意的是,dom、html、url只需设定其中一个就行,若配置html或url,你必须也配置宽高值。 |
iframe: { src: '', } |
iframe层模式私有参数。
src: 要打开的网址。 scrolling: 是否允许iframe出现滚动条,默认自动。允许:'yes',不允许:'no' |
loading: { type: 0 } |
加载层私有属性。
type: loading图标类型(提供了0-3的选择)。 一般配合ajax使用 |
tips : { msg: '', follow: '#id', guide: 0, isGuide: true, more: false, style: ['', ''] } |
tips提示层私有属性。
msg: 提示内容。 follow: 吸附目标选择器。 guide: 指引方向(0:上,1:右,2:下,3:左)。 isGuide: 是否显示默认三角形。 这个参数可配合msg帮助你自定义三角形icon more: 是否允许多个tips style: ['background-color:#FFF8ED; color:#000; border:1px solid #FF9900; /* 此处可用来自定义tips的css样式 */', '#FF9900']]。 数组第二个值,为三角形的颜色。 |
回调函数 | |
success: function(layero){ } |
层弹出成功后的回调函数.
layero是回调传过来的当前层容器的实例,这意味着你可以对当前弹层进行dom操作 |
yes: function(index){} |
按钮一的回调函数
index为当前层的索引,主要用来回调执行后,配合layer.close(index)来关闭层 |
no: function(index){} |
按钮二的回调函数 |
close: function(index){} |
层右上角关闭按钮的点击事件触发回调函数。 |
end: function(){} |
层被彻底关闭后执行的回调函数。 |
moveEnd: function(){} |
拖拽完毕触发的回调函数 |
min: function(layero){}, full: function(layero){}, restore: function(layero){} |
分别为最小化、全屏、还原触发后的回调函数
layero是当前层容器的实例 layer1.8开始新增 |
方法名 | 描述 |
$.layer({基础参数}) |
核心接口,参数是一个对象,对象属性参见基础参数。
诸如layer.alert/layer.confirm/layer.msg/layer.tips等皆为$.layer()的二次封装。 |
layer.v | 获取layer版本号。 |
layer.alert(msg, icon, fn) |
对单按钮信息框的重新封装
参数分别为: 提示内容, 图标类型(-1到16的选择), 回调函数或标题 如:layer.alert('你好layer', 9); |
layer.confirm(msg, yes, no) |
对询问框的重新封装
参数分别为: 提示内容, 确定回调函数, 取消回调函数或标题 如: layer.confirm('确定删除吗?', function(){ //删除成功 }); |
layer.msg(msg, time, parme) |
对无标题栏信息框层的重新封装
参数分别为: 提示内容, 自动关闭秒数(默认2), 对象或回调函数或图标类型 当parme是一个对象时,您可配置{type: 图标, shade: 是否开启遮罩(默认true), rate: 弹出的动画类型,具体值见layer.shift的参数说明} 当parme是一个函数时,则将作为层消失后的end的回调 当parme是一个数字时,则将作为msg的图标类型 如: layer.msg('删除成功', 2, function(){ location.reload(); //自动关闭后可做一些刷新页面等操作 }); |
layer.load(parme, loadStype) |
对加载层的重新封装
参数分别为:加载提示语或自动关闭所需秒数, 加载风格(0-3的选择) 如果parme是一段文字,您可以这样:layer.load('加载中'); 如果parme是一个数字,则为自动关闭所需最长等待秒数(0时则不自动关闭) ,如:layer.load(3) //3秒后自动消失 |
layer.tips(html, follow, parme) |
对tips层的重新封装。
参数分别为:tips内容, 要吸引的dom对象, 对象 parme允许传这些属性{time: 自动关闭所需秒, maxWidth: 最大宽度, guide: 指引方向, style: tips样式(参加api表格一中的style属性)} 如: obj.on('click', function(){ layer.tips('这是小提示','#id'); }); |
layer.close(index) |
用于手动关闭层。
index参数为调用layer时返回的索引值。如: var index = $.layer({此处是您的配置}); //诸如 var index = layer.alert();之类的也会返回index索引 //关闭时,只要把index传给close方法即可关闭对应的层,如: layer.close(index); |
layer.closeTips() | 用于关闭tips层。 |
layer.closeAll() | 用于关闭所有层,在多层模式时也许会用到 |
layer.area(index, options) | 用于重定义指定层的宽高、坐标、z-index等。
参数分别为:层的索引, 对象 options允许传这些属性 {width:宽度, height: 高度, top: 纵坐标, left:横坐标, zIndex:z-index值}等css属性。 该方法仅针对页面层(type:1)和iframe层(type:2)有效; |
layer.title(name, index) | 用于动态改变层的标题。
参数name为标题名,index为层的索引; |
layer.autoArea(index) | 用来处理在层中宽高改变时,重新自适应层宽高。必填参数为层的索引值 |
layer.getChildFrame(selector, index) |
获取子iframe中的DOM。一般用于父窗口操作iframe页。
参数分别为:iframe页的选择器, 层索引 |
layer.getFrameIndex(window.name) |
获取当前所在iframe层的索引。 只允许在iframe页面内部调用。如在内部关闭自身: var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); |
layer.iframeAuto(index) |
用于让iframe层自适应。
index为层的索引 |
layer.iframeSrc(index, url) | 用于重置iframe层的url
参数分别为: 层的索引, url链接 |
layer.setMove() | 当拖拽元素改变时,可用此方法重新初始化拖拽。 |
layer.setTop(layerNow) |
引用此方法可开启点击使当前窗口置顶功能,只能用于用在success回调中。
layerNow参数即为success回调函数中传过来的参数,即当前layer容器。当需要时,需配置zIndex:layer.zIndex, 详见[场景实例]页面的例子:无限层中层 |
layer.min(index, options) layer.full(index, options) layer.restore(index) |
三个方法功能分别为:最小化、全屏、还原
index为层的索引,可通过var index = $.layer({})得到 options需传入层{area: [正常尺寸下的宽度, 正常尺寸下的高度], offset: [正常尺寸下的top, 正常尺寸下的left]} 如:layer.full(1, {area: ['300px', '200px', offset: ['200px', '']]}); 即可自己去控制什么地方操作全屏 |
layer.use(module, callback) |
载入一个模块,支持载入js、css。
参数分别为:css或js路径, 加载完毕回调函数 如载入一个js:layer.use('extend/layer.ext.js', function(){}); |
layer.index | 静态属性,用于获取最近一次触发的层索引值 |
layer.zIndex | 静态属性,用于获取layer容器中的最大z-index值 |
layer.path | 静态属性,获取当前layer的存放路径。 |
方法名 | 描述 |
目前拓展方法主要是指layer.ext.js提供的拓展类,您可以按照自己的需求选择引入,同样的,不需要引入css,只需要执行 layer.use('extend/layer.ext.js') 即可,关于layer.use的使用,请看集成方法的介绍; | |
layer.ext = function(){} |
首次加载layer.ext.js模块完毕的回调方法。
如果页面一加载即执行拓展层,需用到此方法。 如: layer.use('extend/layer.ext.js', function(){ layer.ext = function(){ layer.prompt(); } }) |
layer.prompt(options, yes, no); |
用于弹出一个prompt层模式
参数分别为:对象, 确定的回调函数, 取消的回调函数 options允许你配置: { top: 高度, type: 0, //支持普通文本框(0)、密码框(1)、文件框(2)、多行文本框(3), title: '标题', val: '', //表单的默认值 length: 200 //表单框可输入的最长值 }如: layer.prompt({title: '测试'}, function(val, index, elem){ //index为该层索引,elem为表单元素。 alert('得到:'+ val); })试一试 |
layer.tab(parme) |
实现弹出tab层。
parme是一个对象,它允许传入{data: [], area: 宽高, offset: 坐标} 如: layer.tab({ data:[ {title: '标题一', content:'内容一,可加html'}, {title: '标题二', content:'内容二。什么?嫌tab层太难看?噢是的,这只是个骨架。'} ], area: ['600px', '300px'] //宽度,高度 });试一试 |
layer.photos(options) |
实现图片的相册模式浏览。支持异步请求过来的json数据、支持直接弹出页面指定区域所有图片
options是一个对象,具体调用,深入了解 |
layer.photosPage(options) |
直接弹出页面指定区域所有图片以实现相册浏览。他是对layer.photos的二次封装
options同样是一个对象,具体调用,深入了解 |