web弹层组件layer

layer简介

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

layer演示
输入/文件层 tab层 相册层
触发弹层的事件可自由绑定,如:
$('#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 API文档
键: 值 描述
下表的属性都是默认值,您可在调用时按需重新配置,他们可帮助你实现各式各样的风格。如是调用: $.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同样是一个对象,具体调用,深入了解