jquery 弹窗插件 layer-阿里云开发者社区

开发者社区> 范大脚脚> 正文

jquery 弹窗插件 layer

简介:
+关注继续查看
复制代码
复制代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 7 <script type="text/javascript" src="layer.min.js"></script>
 8 
 9 </head>
10 <body>
11     <input type="button" class="testBtn" value="click me">
12 <script type="text/javascript">
13     /*layer.alert('白菜级别前端攻城师贤心', 1);*/
14     /*layer.confirm('白菜级别前端攻城师贤心', 8);*/
15     /*layer.load('加载中……',4);*/
16     /*$.layer({
17         shade : [0], //不显示遮罩
18         area : ['auto','auto'],
19         dialog : {
20             msg:'您是如何看待前端开发?',
21             btns : 2, 
22             type : 4,
23             btn : ['重要','奇葩'],
24             yes : function(){
25                 //layer.msg('您选择了重要。',2,1);
26                 layer.closeAll();
27             },
28             no : function(){
29                 layer.msg('奇葩!!!',2,4);
30             }
31         }
32 });*/
33     $('.testBtn').on('click',function(){
34         layer.tips('tips的样式并非是固定的,您可自定义外观。', this, {
35         style: ['background-color:#E227C7; color:#fff', '#E227C7'],
36         maxWidth:185,
37         closeBtn:[0,true] //显示关闭按钮
38     });
39     })
40 
41 </script>
42 </body>
43 </html>
复制代码
复制代码

 

  常见接口如下:

方法名 描述
$.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, parme),三个参数,1.7.0开始对参数做了多重判断,msgText:信息内容(文本),msgTime:自动关闭所需等待秒数(默认2秒),如 果parme是一个数字,则将作为msg的图标参数,如果parme是一个函数,则将作为层消失后的end的回调,如果parme是一个object,您 可配置{type:图标类型,shade:false//是否遮罩,如果是,不用配置,rate:'top'//弹出的动画类型,具体值见 layer.shift的参数说明}
layer.tips() 对tips层的重新封装,layer.tips(html, follow, parme),三个参数,html:信息内容(文本),follow:触发事件对应的选择器,parme是一个对象,其中包含了{time:自动关闭所需 等待秒数, maxWidth:最大宽度, guide:指引方向, style: tips样式(参加api表格一中的style属性)}

如:

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

 

layer.load(parme, loadIcon) 对加载层的重新封装,如果你想在loading中附加一些文字的话,您可以这样:layer.load('加载中'); 如果parme是一个数字,意味着parme为自动关闭所需最长等待秒数(0时则不自动关闭),loadIcon:加载图标(整数,0-3的选择) 如:layer.load(0, 1);
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弹出时内置动画,在success回调中使用。type:动画类型,供七种选择,左上(left-top),上(top), 右上(right-top),右下(right-bottom),下(bottom),左下(left-bottom),左('left')。
rate:动画频率,毫秒。 如:
success : function(){
   layer.shift('right-bottom' , 400); //右下角弹出,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.path 静态属性一枚,获取当前layer的存放路径。
layer.use(module, callback) 载入一个模块,支持载入js、css,当你试图给layer拓展个js模块时,用它会更高大上不是么。如载入一个js:layer.use('extend/layer.ext.js', function(){}); 详细参考layer.ext.js

 

参数说明如下:

 

键: 值 描述
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
fadeIn: 300, (1.7.0重新新增,1.4.*貌似也有),用于层的渐显,值为毫秒数
move : ['.xubox_title' , true] 通过拖拽层的某个元素来实现对层的拖拽。'.xubox_title':拖拽绑定事件所在元素选择器(默认为标题栏),true:是否允许拖拽(否:false)
moveOut : false 用于控制层是否允许被拖出可视窗口外,false:不允许,true:允许
moveType: 0 (1.7.0新增)用于配置拖拽类型,默认为空心方块式拖动层,若值设为1,则直接拖动层
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:右,2:下,3:左)。
isGuide:是否显示默认三角形。 这个参数可配合msg帮助你自定义三角形icon
[自定义样式示例] style: ['background-color:#FFF8ED; color:#000; border:1px solid #FF9900', '#FF9900']]。

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

success : function(layer){} 层弹出成功后的回调函数
close : function(index){} 层右上角关闭按钮的回调函数。
end : function(){} 层被彻底关闭后执行的回调函数。它的存在让close回调成为浮云。
moveEnd : function(){} 拖拽时鼠标按键放下后的回调函数


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/5508964.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26515 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2807 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
10950 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10379 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
12214 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
8767 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7313 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
21681 0
+关注
3656
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载