jQuery-plugin-layer(弹出层插件)官方演示与讲解

author贤心
关于layerAPIdemo演示实例加强版常见问题 建议反馈 hot 博客首页赞助layer 查看赞助名单
  • 当前版本:v (2013-8-30更新)
  • 相关交流:176047238 大前端江湖-layUI一群
大小:52KB,下载次数:

一些唠叨

layer,一个可以让你想到即可做到的web弹窗(层)解决方案(js组件),作者贤心(菜鸟级前端攻城师)。layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力。其意义在于,可以让您的页面拥有更丰富与便捷的操作体验,而您只需在调用时简单地配置相关参数,即可轻松实现。

与同类弹出层组件相比,layer的优势明显,她尽可能地在以更少的代码展现出更强健的功能。layer格外注重性能的提升,在多层模式的回调处理中,具备其它多数层组件所没有的“独立不冲突”(已有人次关注新版layer)。您完全可以大可放心地在页面弹出任意数量的层,她们彼此不妨碍。当你问及她的兼容时,layer必须告诉你,她兼容了一切浏览器,包括古老的ie6。

layer公开了如此多的接口(api),这使得您可以DIY太多您需要的风格,尤其是页面层模式,意味着必要时您可以完全抛弃layer的现有皮肤,并用你的思维去勾勒她的衣着。而问题在于,我必须中止“王婆卖瓜”的陈述。因为一切的不足或友好,都需要您在使用过程中去发现。

据不完全统计,截至到2013年8月30号,layer已服务于6000多家web平台。layer作为layUI库的成员,将一直致力于为web开发提供动力。

layer热门案例

八圆包(http://www.bayuanbao.com)是一家贴心的小而美集市,致力于发现物美价廉,汇集高性价比实惠宝贝,比如九块九包邮性质的商品。它助你用最小的成本,缔造完美品质生活体验。该站所有页面都有用到layer,有兴趣的同学可以去八圆包玩玩,里面的商品都非常实惠。八圆包在试图展现一个真实的导购世界,由资深网购小编为您每日精选。

先一睹为快?

点击以下各方框查看效果:

//信息框例一
$.layer({
	area : ['auto','auto'],
	dialog : {msg:'白菜级别前端攻城师贤心',type : 8}	
});
//快捷调用:
layer.alert('白菜级别前端攻城师贤心', 8);

//信息框例二
$.layer({
    area : ['auto','auto'],
    title : false,
    dialog : {msg:'前端攻城师贤心'}	
});

//询问框
$.layer({
    shade : [0], //不显示遮罩
    area : ['auto','auto'],
    dialog : {
        msg:'您是如何看待前端开发?',
        btns : 2, 
        type : 4,
        btn : ['重要','奇葩'],
        yes : function(){
            layer.msg('您选择了重要。',2,1);
        },
        no : function(){
            layer.msg('奇葩!!!',2,4);
        }
    }
});
//快捷调用:layer.confirm();

//页面层例一
$.layer({
	shade : false,
	type : 1,
	area : ['auto','auto'],
	title : false,
	border : [0],
	page : {dom : '.layer_notice'},
	close : function(index){
		layer.close(index);
		$('.layer_notice').show();
	}
});
			
//页面层例二
var i = $.layer({
	type: 1,
	title: false,
	closeBtn: false,
	border : [5, 0.5, '#666', true],
	offset: ['0px',''],
	move: ['.juanmove', true],
	area: ['620px','auto'],
	page: {
		html: '自定义的html'
	}
});
$('.juanLu').on('click', function(){
	layer.close(i);
});

//iframe层例一
$.layer({
    type : 2,
    closeBtn : false,
	shadeClose: true,
    time : 5,
    iframe : {
        src : 'http://player.youku.com/player.php/sid/XMjY3MzgzODg0/v.swf'
    },
    title : false,
    area : ['500px','300px'],
    success : function(){ //层加载成功后进行的回调
        layer.shift('right-bottom',1000); //浏览器右下角弹出
    },
    end : function(){ //层彻底关闭后执行的回调
        $.layer({
            type : 2,
            offset : ['100px', ''],
            iframe : {
                src : 'http://sentsin.com/about/'
            },	
            area : ['960px','500px']
        })
    }
});

//iframe层例二
$.layer({
	type: 2,
	title: false,
	fix: false,
	closeBtn: false,
	shadeClose: true,
	shade: [0.1,'#fff', true],
	border : [5, 0.3, '#666', true],
	offset: ['100px',''],
	area: ['990px','500px'],
	iframe: {src: 'http://sentsin.taobao.com/'},
	success: function(){
		layer.msg('点击层外任意处,可关闭该iframe层', 2, 9);
	}
});

//加载层
$.layer({
    type : 3,
    time : 2
});
//快捷调用:layer.load(0);

//tips层一
$('.class').click(function(){
	layer.tips('我爱你,你爱我吗?' , this , 0, 200, 0, ['background-color:#E227C7; color:#fff', '#E227C7']);
});

//tips层二
layer.tips('推荐虾米音乐网', '#id', 0, 200, 1);
                
新版示例
layer API之键值(仅在需要时配置,未配置的会用默认)
键 : 值描述
type : 0,层的类型。0:信息框(默认),1:页面层,2:iframe层,3:加载层,4:tips层。

此为重要参数,不同类型层类型的总开关,调用时必须设置。

shade : [0.5 , '#000' , true]控制遮罩。0.5:遮罩透明度,'#000':遮罩颜色,true:是否遮罩(否:false)
shadeClose : false 用来控制点击遮罩区域是否关闭层。(是:true)。
fix : true,层是否固定在可视区域。否:false
move : ['.xubox_title' , true]通过拖拽层的某个元素来实现对层的拖拽。'.xubox_title':拖拽绑定事件所在元素选择器(默认为标题栏),true:是否允许拖拽(否:false)
moveOut : false用于控制层是否允许被拖出可视窗口外,false:不允许,true:允许
title : '信息'控制标题栏。不想显示标题栏,配置title:false 即可
offset : ['220px' , '50%']控制层坐标。'220px':纵坐标,'50%':横坐标。 需要注意的是,像素必须带px单位,百分比不需要。该参数灵活运用,可助你实现诸多特效。
area : ['310px' , 'auto']控制层宽高。'310px':宽,'auto':高。 当设置为auto时,意味着采用自适应, 当然,对于宽度,并不推荐您这样做。
closeBtn : [0 , true]控制层右上角关闭按钮。0:关闭按钮风格(1:风格2),当标题栏不存在时,自动切换为风格2。 true:是否显示关闭按钮(否:false)
time : 0自动关闭等待秒数,整数值。也许它可以助你做蛮多事,想象一下吧。
bgcolor : '#fff'用于控制层的背景色,默认白色(#fff),如设置透明,设置空字符即可。
border : [10 , 0.3 , '#000', true]10:边框大小,0.3:边框透明度,'#000':边框颜色,true:是否显示边框(否:false)。通过它您可以任意配置边框,譬如你觉得边框碍眼,赶紧启用[0,0,'',false]吧
zIndex : 19891014控制层堆叠顺序(z-index)。整数值,默认是贤心的生日。合理设置它,可以避免与其它插件的层级冲突
maxWidth : 400最大宽度。整数值。当宽度设为auto时才有用。
dialog: {
    btns : 1,
    btn : ['确定', '取消'],
    type : 3,
    msg : '',
    yes : function(index){ },
    no : function(index){ }
}
                        

信息框层模式提供的私有参数。使用时,按需配置即可

btns : 按钮的个数。提供了0-2的选择

btn : [按钮一的文本值 , 按钮二的文本值]

type : 图标类型,提供了0-15的选择,也许有你喜欢的。 设置-1不显示图标(1.6.0)

msg : 信息框内容,重要参数

yes : 按钮一的回调函数

no : 按钮二的回调函数

page: {
	dom: '#xulayer', 
	html: '',
	url: '',
	ok: function(){}
}
					
页面层模式私有参数。dom:需要弹出的html片段所对应的选择器(class 或 id,推荐用id,确保唯一)。html: 自定义html字符串。url:ajax请求地址。ok,ajax请求完毕后执行的回调。需要注意的是,优先级是:html>url>dom,这意味着,当你一旦配置了html的非空值,将优先采用html中的元素弹出,如此类推,若配置html或url,你必须也配置宽高值。html参数为layer-v1.5.1开始新增。url和ok为1.6.0开始新增
iframe: {
 src: 'http://sentsin.com'
}
					
iframe层模式私有参数。src:要打开的网址。使用率非常高,尤其是对于喜欢用iframe的同学。
loading : {type : 0}加载层私有属性。type:loading图标类型(提供了0-3的选择,试试吧,看看有无你喜欢的)。一般配合ajax使用
tips : {
    msg: '',
    follow: '',
	guide: 0,
	isGuide: true,
	style: ['tips自定义样式', '三角形颜色']
}          
                        
tips小提示层私有属性。
msg:提示内容。
follow:触发事件对应的选择器。
guide:指引方向(0:上下,1:左右)。
isGuide:是否显示默认三角形。 这个参数可配合msg帮助你自定义三角形icon
[自定义样式示例] style: ['background-color:#FFF8ED; color:#000; border:1px solid #FF9900', '#FF9900']]。

layer-v1.5.1开始,对tips逐渐有了较为完善的支持,提供了上下和左右模式,可智能识别指引方向。

success : function(layer){}层弹出成功后的回调函数
close : function(index){}层右上角关闭按钮的回调函数。
end : function(){}层被彻底关闭后执行的回调函数。它的存在让close回调成为浮云。
moveEnd : function(){}拖拽时鼠标按键放下后的回调函数
layer API之内置方法
方法名描述
$.layer({})核心接口,参数是一个对象,对象属性参见上述列表。诸如layer.alert()之类的为$.layer()的包装方法。
layer.v获取版本号。
layer.ready(callback)layer中的样式文件装载完毕后执行的方法,一般用于页面加载时调用layer,这样可避免样式未加载即调用层导致的错乱。 示例:
layer.ready(function(){
	layer.msg('Hello Layer');
});
					
layer.alert()对单按钮信息框的重新封装,layer.alert(alertMsg , alertType, alertTit , alertYes),四个参数,alertMsg:信息内容(文本),alertType:提示图标(整数,0-10的选择),alertTit:标题(文本),alertYes:按钮的回调函数。 如:layer.alert('前端攻城师贤心')
layer.confirm()对询问框的重新封装,layer.confirm(conMsg , conYes , conTit , conNo),四个参数,conMsg:信息内容(文本),conYes:按钮一回调,conTit:标题(文本),conNo:按钮二的回调。

如:

layer.confirm('确定删除?', function(){ 
layer.msg('删除成功!') 
});

layer.msg()对无标题栏信息框层的重新封装,layer.msg(msgText , msgTime , msgType , callback),四个参数,msgText:信息内容(文本),msgTime:自动关闭所需等待秒数(默认2秒),msgType:提示图标(整数,0-10的选择),callback:自动销毁后的回调函数。如:layer.msg('嗨,伙计,我是layer')
layer.tips()对tips层的重新封装,layer.tips(html , follow , time , maxWidth, guide, style),四个参数,html:信息内容(文本),follow:触发事件对应的选择器,time:自动关闭所需等待秒数,maxWidth:最大宽度,guide: 0(上下模式)或者1(左右模式) style: tips样式(参加api表格一中的style属性)

如:

$('.demo').click(function(){
	layer.tips('这是小提示',this);
});

layer.load()对加载层的重新封装,layer.load(loadTime , loadgif , loadShade),三个参数,loadTime:自动关闭所需等待秒数(0时则不自动关闭),loadgif:加载图标(整数,0-3的选择),loadShade:是否遮罩(true 或 false)。如:layer.load(0);
layer.area(index, options)用于重定义指定层的宽高、坐标、z-index等。index为层的索引,options包含{width:'',height:'',top:'',left:'',zIndex:''}等css属性。该方法仅针对页面层(type:1)和iframe层(type:2)有效; 此方法为1.6.0开始新增
layer.index静态属性,用于获取最近一次触发的层索引值
layer.getChildFrame(selector, index)获取子iframe中的DOM。非常实用,父窗口操作iframe中内容时可以大显神威。index参数为1.6.0开始新增,由于允许弹出多个iframe层,所以需借助index索引来操作指定层
layer.getFrameIndex(window.name)获取当前所在iframe层的索引。 只允许在iframe页面内部调用。如在内部关闭自身:
var i = parent.layer.getFrameIndex(window.name);
parent.layer.close(i);
					
layer.close(index)用于手动关闭层。参数为layer的索引值。索引即通过弹出方法返回的值。如:

var i = $.layer({}); //或者 var i = layer.alert();之类的也可返回索引
layer.close('i');

layer.closeAll()用于关闭所有层,在多层模式时也许会用到
layer.shift(type , rate)layer弹出时内置动画,type:动画类型,供四种中选择,左上:'left-top',右上:'right-top',左下:'left-bottom',右下:'right-bottom' 。 rate:动画频率,毫秒。 如:
success : function(){
   layer.shift('right-bottom' , 400);
}
layer.autoArea(index)用来处理在层中宽高改变时,重新自适应层宽高。必填参数为层的索引值
layer.iframeAuto(index)用于让iframe层自适应。非常实用,如果是在iframe层内部,则可通过var index = layer.getFrameIndex (window.name)得到;若在父页面,则可通过调用iframe层的返回值得到,如var index = $.layer(); 详见官网实例演示之iframe子父操作。
layer.setMove()当拖拽元素改变时,可用此方法重新初始化拖拽。
layer.zIndex全局属性,用于获取layer容器中的最大z-index值
layer.setTop(layerNow)引用此方法可开启点击使当前窗口置顶功能,只能用于用在success回调中,layerNow参数即为success回调函数中传过来 的参数,即当前layer容器。type:1/type:2多窗口模式时可能非常实用,当需要时,需配置zIndex:layer.zIndex,可详见[实力加强版]一页的例子:[页面层]之无限层中层

实例演示

layer提供了五种模式的层,分别为:信息框、页面层、iframe层、加载层、tips层。下面就此进行大致的演示,更多功能还需要您自己去实验发现。代码区域不包含事件绑定,使用时,请自己放在对应事件回调中执行。

使用组件时,请将layer整个文件夹放置您项目的任何一个目录下,只需引入layer.js或layer.min.js即可(别忘了引入jquery,推荐使用jquery1.8.0)

点击以下各方框查看效果:

例一:
layer.alert('一个很普通的信息框');

例二:
layer.alert('信息框演示二', 11, !1);

例三:
layer.confirm('信息框演示三',function(index){
    layer.close(index);
    layer.msg('信息框演示三');
});

例四:
layer.msg('也可以不用显示图标哦', 2, -1);

信息框之变脸:
var i = 0;
$.layer({
	dialog:{type:0,msg:'点击我,换图标'},
	success: function(layerE){
		$('#setface').unbind('click').bind('click',function(){
			var index = layer.getIndex(this);
			i++;
			layerE.find('.xubox_msgico').removeClass('xubox_msgtype'+(i-1)).addClass('xubox_msgtype'+i);
			i > 10 && layer.close(index);
		});
	}, end: function(){
		i = 0;
	}
});
例六:
layer.msg('踩到屎啦', 2, 13);

一:页面层之仿百度登录:
var i = $.layer({
	type : 1,
	title : false,
	closeBtn : false,
	border : [0],
	area : ['455px','371px'],
	page : {dom : '#baidu'}
});
$('#baidu').on('click', function(){
	layer.close(i);
});

二、页面层之图片:
var i = $.layer({
    type : 1,
    title : false,
    fix : false,
    offset:['50px' , ''],
    area : ['515px','615px'],
    page : {dom : '#tong'}
});

三、页面层之淘宝:
var i = $.layer({
    type : 1,
    title : false,
    offset:['150px' , ''],
    border : false,
    area : ['503px','395px'],
    page : {dom : '#taobao'}
});
一:iframe层之从左下角弹出
$.layer({
    type : 2,
    title : false,
    iframe : {src : 'http://pic10.nipic.com/20101023/145234_134017065776_2.gif'},
    area : ['350px' , '466px'],
    success : function(){
        layer.shift('left-bottom',400);	
    }
});

二:iframe层之正中央
$.layer({
    type : 2,
    title : '天之痕三个人的时光-半抱琵琶版',
    iframe : {src : 'http://www.tudou.com/v/Rvy0IbYmBrQ/&resourceId=0_04_05_99/v.swf'},
    area : ['750px' , '466px'],
    offset : ['100px','']
});

三:iframe层之子父操作
$.layer({
	type : 2,
	shade : [0],
	title : ['iframe子父操作',true],
	iframe : {src : 'iframe.html'},
	area : ['500px' , '260px'],
	offset : ['150px', ''],
	close : function(index){
		layer.msg('您获得了子窗口标记:' + layer.getChildFrame('#name', index).val(),3,1);
		layer.close(index);
	}
});

子窗口操作父窗口:
var index = parent.layer.getFrameIndex(window.name);
$('#a').click(function(){
	parent.layer.msg('您将标记"' + $('#name').val() + '"成功传送给了父窗口' , 3, 1);
	parent.layer.close(index);
});
$('#add').on('click', function(){
	$('body').append('新元素');
	parent.layer.iframeAuto(index);
});
$('#new').on('click', function(){
	parent.$.layer({
		type : 2,
		title : ['iframe子父操作',true],
		iframe : {src : 'http://sentsin.com'},
		area : ['1000px' , '500px'],
		offset : ['100px', '']
	});
});        
            
例一:
$.layer({
    type : 3,
    time : 2
}); 
//或 layer.load(3,2);
//如不想让加载自动关闭,第一个参数设置0即可,如:layer.load(0);

例二:					
$.layer({
    type : 3,
    time : 2,
    shade : false,
    border : false,
    loading : {type : 3}
});           
            
tips提示层一
$('#id').on('click', function(){
	layer.tips('嗨,<em>朋友</em>,更多效果你自己慢慢发现吧。' , this, 0, 150, 0, ['background-color:#0FA6D8; color:#fff;','#0FA6D8']);
});

tips提示层二
$('#id').on('click', function(){
	layer.tips('在无数个前世/远古的记号/我相信忠贞的邂逅/将凝视在如故的火花/在思念中呈现,默念/宁缺毋滥/这是对生活的尊重/一如维护神圣之约/一旦出现/所有潜在的能量将会唤醒/一个真实并活着的我/星空将布满斗志/在旅行于天涯之间/在依偎于河川之中/大地奏响了奉献/这,就是生命/——贤心 2013.2.21 0:24' , this, 0, 400, 1, ['background-color:#F26C4F; color:#fff;','#F26C4F']);
});
      
            

常见问题

问:如何利用layer弹出无数个层

页面层模式(type:1)灵活性很高,请详细阅读api中的page属性。它的存在几乎让一切变得可自定义,善用它,会让你的页面增加几乎可能实现的所有作用力。

问:如何手动关闭层

调用layer时,会返回一个索引,将此索引传递给layer.close()即可自己制作关闭层的模型。 如: var i = $.layer(); 关闭时,layer.close(i)即可

问:layer支持跨iframe操作吗?

答:答案是肯定的。layer提供了layer.getChildFrame(selector)和layer.getFrameIndex()两个方法(使用说明详见api)。他们可以帮助你轻松实现iframe之间的操作,另外,当你需要在子iframe操作父窗口时,请用parent对象,比如让iframe外弹出一个layer:parent.$.layer({})

问:我实在有太多的问题要问,怎么办?

答:在此不得不承认,贤心精力非常有限,而之所以维护layer,仅仅只是为了让朋友们在web开发中提供一些方便,尽管这种帮助是微小的,尽管layer还并不够成熟。 但这种无私并不意味着它的作者就必须承担解答你一切疑问的责任。 因此,如果您真的喜欢layer,请您花些时间阅读api,并尽可能地自己去修正layer的bug。 ——贤心

点击查看皮肤与兼容性问题