jQuery 弹出 插件 layer 实例 总结

标签:,
来源: WordPress导航主题
日期: 2022-9-6
作者: WordPress导航主题

首先向大家推荐layer,在这里也非常感谢贤心的贡献,非常不错的信息框及弹出层解决方案,为一些项目的前端开发提高了很大的效率,希望layer 越办越好!

下面是API,呵呵,官方抄袭过来的,为了自己看着方便。

layer API之键值(仅在需要时配置,未配置的会用默认)
键 : 值 描述
skin : 0 层的皮肤编号,值为整数型。目前默认只提供一种皮肤,当你按照样式规则新增皮肤时(详见skin/layer.css),你可配置该参数。
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)
title : [‘信息’ , true] 控制标题栏。’信息’:标题栏文字,true:是否显示标题栏(否:false)
offset : [‘220px’ , ‘50%’] 控制层坐标。’220px’:纵坐标,’50%’:横坐标。 需要注意的是,像素必须带px单位,百分比不需要。该参数灵活运用,可助你实现诸多特效。
area : [‘310px’ , ‘auto’] 控制层宽高。’310px’:宽,’auto’:高。 当设置为auto时,意味着采用自适应, 当然,对于宽度,并不推荐您这样做。
closeBtn : [0 , true] 控制层右上角关闭按钮。0:关闭按钮风格(1:风格2),当标题栏不存在时,自动切换为风格2。 true:是否显示关闭按钮(否:false)
time : 0 自动关闭等待秒数,整数值。也许它可以助你做蛮多事,想象一下吧。
border : [10 , 0.3 , ‘#000’, true] 10:边框大小,0.3:边框透明度,’#000′:边框颜色,true:是否显示边框(否:false)。通过它您可以任意配置边框,譬如你觉得边框碍眼,赶紧启用[0,0,”,false]吧
zIndex : 19891014 控制层堆叠顺序(z-index)。整数值,默认是贤心的生日。合理设置它,可以避免与其它插件的层级冲突
maxWidth : 400 最大宽度。整数值。当宽度设为auto时才有用。
fadeIn : [300 , false] 控制层的渐显。300:渐显频率,false:是否开启渐显(默认不开启,true:开启) 从来都觉得这参数形同虚设。
dialog: {      btns : 1,      btn : ['确定', '取消'],      type : 3,      msg : '',      yes : function(index){ },      no : function(index){ }  }
信息框层模式提供的私有参数。使用时,按需配置即可btns : 按钮的个数。提供了0-2的选择

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

type : 图标类型,提供了0-10的选择,也许有你喜欢的。

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

yes : 按钮一的回调函数

no : 按钮二的回调函数

page: {  	dom: '#xulayer',   	html: ''  }
页面层模式私有参数。dom:需要弹出的html片段所对应的选择器(class 或 id,推荐用id,确保唯一)。需要注意的是,html优先级高于dom,这意味着,当你一旦配置了html的非空值,将优先采用html中的元素弹出,并且不支持area的自适应模式,你必须配置宽高值。html参数为layer-v1.5.1开始新增。
iframe: {   src: 'http://laoji.org'  }
iframe层模式私有参数。src:要打开的网址。使用率非常高,尤其是对于喜欢用iframe的同学。
loading : {type : 0} 加载层私有属性。type:loading图标类型(提供了0-3的选择,试试吧,看看有无你喜欢的)。一般配合ajax使用
tips : {      msg: '',      follow: '',  	guide: 0,  	style: ['tips自定义样式', '三角形颜色']  }
tips小提示层私有属性。msg:提示内容,follow:触发事件对应的选择器。 guide:指引方向(0:上下,1:左右)。[自定义样式示例] 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回调成为浮云。
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.getChildFrame(selector) 获取子iframe中的DOM。非常实用,父窗口操作iframe中内容时可以大显神威。如:layer.getChildFrame(‘body’).html() //得到iframe的body的全部html元素
layer.getFrameIndex() 获取iframe层的索引。 如在iframe页中关闭自身:

var i = parent.layer.getFrameIndex();  parent.layer.close(i);
layer.close(index) 用于手动关闭层。参数为layer的索引值。索引即通过弹出方法返回的值。如:

var i = $.layer({}); //或者 var i = layer.alert();之类的也可返回索引  layer.close('i');
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() 用于让iframe层自适应。非常实用,详见官网实例演示之iframe子父操作。
layer.setMove() 当拖拽元素改变时,可用此方法重新初始化拖拽。

腾讯云限时秒杀【点击购买】

搬瓦工,CN2高速线路,1GB带宽,电信联通优化KVM,延迟低,速度快,建站稳定,搬瓦工BandwagonHost VPS优惠码BWH26FXH3HIQ,支持<支付宝> 【点击购买】!

Vultr$3.5日本节点,512M内存/500G流量/1G带宽,电信联通优化,延迟低,速度快【点击购买】!

阿里云香港、新加坡VPS/1核/1G/25G SSD/1T流量/30M带宽/年付¥288【点击购买】

jQuery 弹出 插件 layer 实例 总结

`微信`扫码 加好友

链接到文章: https://gkxyz.com/jquery-danchu-chajian-layer-shili-zongjie.html

推荐站点

评论已关闭