layer basic properties

layer({

type:1, //display text content, 1 is html content
title:"tip",
area:["300px","200px"], //set the width and height of the popup window
content: //popup box The content of
btn:["OK","Cancel"], //set the button
yes:function(){} ,//the first button
btn2:function(){}, //the second button
concal: // Click to close
})


layer property

key: value

describe

The properties in the table below are all default values, you can reconfigure them when you call them, they can help you achieve various styles. Call it: $.layer({key: value, key: value, …});

type: 0

Type of layer. 0: info box (default), 1: page layer, 2: iframe layer, 3: loading layer, 4: tips layer.

This is an important parameter. The total switch of different types of layers does not need to be configured if it is type: 0, and other types of layers must set type when calling.

title: 'Information'

Controls the default title bar. 
If you want to customize the title style, you can title: ['title', 'background:#c00;'] //The second parameter can write any css 
. If you don't want to display the title bar, you can configure title: false

maxmin: false

Whether to output window minimize/fullscreen/restore buttons. 
If you need to enable it, set maxmin: true to 
add this function to layer1.8

offset: ['', '']

Control layer coordinates.
The values ​​of offset are: [ordinate, abscissa], the default is vertical and horizontal center
If you want to set the ordinate, you can: offset:['200px', '']/td>

area: ['310px', '130px']

Control layer width and height.
The area values ​​are: [width, height]
When set to auto, it means adaptive (the iframe layer cannot set auto), and it is not recommended to set auto for width.

border: [10, 0.3, '#000']

Controls the border of the layer.
The values ​​of border are: [border size, transparency, color, add true here before layer1.8]
If you don't want to display border, set border: [0]

shade: [0.5, '#000']

Control mask.
The values ​​are: [mask transparency, mask color, add true here before layer1.8] 
If you don't want to display the mask, configure shade: [0]

shadeClose: false

Used to control whether clicking on the mask area closes the layer.
If enabled, set to true

closeBtn: [0, true]

The close button in the upper right corner of the control layer.
The values ​​of closeBtn are: [close button style (support 0 and 1), true]
If you don't want to display the close button, configure 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: '',

        ok: function(datas){}

}

                                  

页面层模式私有参数。 
dom: 页面已存在的选择器 
html: 直接传入的html字符串。 
url: ajax请求地址。 
ok: ajax请求完毕后执行的回调,datas是异步传递过来的值。 
需要特别注意的是,dom、html、url只需设定其中一个就行,若配置html或url,你必须也配置宽高值。

iframe: {

    src: '',

    scrolling: 'auto'

}

                                  

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: [' 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开始新增


 


Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326180607&siteId=291194637