| 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://sentsin.com'
}
|
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: [' 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() | 当拖拽元素改变时，可用此方法重新初始化拖拽。 | |
自由转载，转载请注明： 转载自WEB开发笔记 www.chhua.com
本文链接地址: layer弹出信息框API http://www.chhua.com/web-note4188