layui使按钮居中_layui——layer模块

介绍

功能强大的弹层组件，可以以内置模块来引用，也可以作为独立模块引用；独立模块见：http://layer.layui.com/

1 使用场景

a 作为独立模块使用

如果你只是单独想使用 layer，你可以去 layer

独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。

b layui模块化使用

如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和

layer.js，但需要引入layui.css和layui.js

2 基础参数

2.1 type(类型：Number，默认：0)，基本层类型

layer提供了5种层类型。可传入的值有：0(信息框，默认)1(页面层)2(iframe层)3(加载层)4(tips层)。

若你采用layer.open({type: 1})方式调用，则type为必填项(信息框除外)

2.2 title(类型：String/Array/Boolean，默认：'信息')，标题(灵活！！！Array的做法是layui的个性所在！)；

title支持三种类型的值，若你传入的是普通的字符串，如title

:'我是标题'，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本',

'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false

2.3 content(类型：String/DOM/Array，默认：'')，内容；

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。

layer.open({

type: 1,

content: '传入任意的文本或html'

//这里content是一个普通的String

});

layer.open({

type: 1,

content: $('#id')

//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响

});

//Ajax获取

$.post('url', {}, function(str){

layer.open({

type: 1,

content: str

//注意，如果str是object，那么需要字符拼接。

});

});

layer.open({

type: 2,

content: 'http://sentsin.com'

//这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content:

['http://sentsin.com', 'no']

});

layer.open({

type: 4,

content: ['内容', '#id']

//数组第二项即吸附元素选择器或者DOM

});

2.4 skin(类型：String，默认：'')，样式；

skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lanlayui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义

反正，我用不着~~~

2.5 area(类型：String/Array，默认：'auto')，宽高；

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area:

'500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']

2.6 offset(类型：String/Array，默认：垂直水平居中)，坐标；

offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值：

值  备注

offset: 'auto'  默认坐标，即垂直水平居中

offset: '100px'  只定义top坐标，水平保持居中

offset: ['100px', '50px'] 同时定义top、left坐标

offset: 't'  快捷设置顶部坐标

offset: 'r'  快捷设置右边缘坐标

offset: 'b'  快捷设置底部坐标

offset: 'l'  快捷设置左边缘坐标

offset: 'lt'  快捷设置左上角

offset: 'lb'  快捷设置左下角

offset: 'rt'  快捷设置右上角

offset: 'rb'  快捷设置右下角

2.7 icon(类型：Number，默认：-1信息框 / 0加载层)，图标；

信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6。如果是加载层，可以传入0-2。

信息框默认定义：0 感叹号、1 对号、2 叉号、3 问号、4 锁、5 哭、6 微笑；

加载层默认定义：0 默认，三个点循环、1 大星号转圈 、2 小星号转圈；

2.8 btn(类型：String/Array，默认：'确认')，按钮；

信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn:

'我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no']。当然，你也可以定义更多按钮，比如：btn:

['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2:

function(){}，以此类推。如：

layer.{  // 标题默认“信息”，确认按钮；

layer.msg("Ok");

layer.close(index);

});

layer.confirm("默认询问框", function(index) { //

标题默认“信息”，确认|取消按钮；

layer.msg("Yes");

layer.close(index);

}, function(index) {

layer.msg("Cancel");

layer.close(index);

});

layer.confirm('自定义询问框Yes|No', {

btn: ['是', '否']

}, function(index, layero){

layer.msg("Yes");

layer.close(index);

}, function(index){

layer.msg("No");

layer.close(index);

});

layer.confirm('自定义询问框Yes|No|Cancel', { //

默认后面两个回调是指前两个按钮的回调；

btn: ['是', '否', '取消'],

btn3: function(index){

layer.msg("Cancel");

layer.close(index);

}

}, function(index, layero){

layer.msg("Yes");

layer.close(index);

}, function(index){

layer.msg("No");

layer.close(index);

});

layer.confirm('自定义询问框No|Yes|Cancel', { // 使用yes, btn2,

btn3来定义回调；yes代表第一个按钮，btn2第二个，依此类推；

btn: ['拒绝', '确定', '取消'],

yes: function(index, layero){

layer.msg("拒绝");

layer.close(index);

},

btn2: function(index){ // 一般放在第一个

layer.msg("确定");

layer.close(index);

},

btn3: function(index){

layer.msg("取消");

layer.close(index);

}

});

2.9 btnAlign(类型：String，默认：r)，按钮摆放位置定义；

值  备注

btnAlign: 'l' 按钮左对齐

btnAlign: 'c' 按钮居中对齐

btnAlign: 'r' 按钮右对齐。默认值，不用设置

2.10 closeBtn(类型：String/Boolean，默认：1)，关闭按钮设置；

layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0

2.11

shade(类型：String/Array/Boolean，默认：0.3)，遮罩颜色、透明度设置；

即弹层外区域。默认是0.3透明度的黑色背景('#000')。如果你想定义别的颜色，可以shade: [0.8,

'#393D49']；如果你不想显示遮罩，可以shade: 0

2.12 shadeClose(类型：Boolean，默认：false)，是否点击遮罩关闭；

如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。

2.13 time(类型：Number，默认：0)，自动关闭所需毫秒；

默认不会自动关闭。当你想自动关闭时，可以time:

5000，即代表5秒后自动关闭，注意单位是毫秒(1秒=1000毫秒)

2.14 id(类型：String，默认：空字符)，用于控制弹层唯一标识；

设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式

2.15 anim(类型：Number，默认：0)，弹出动画；

我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6

如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 参数

anim: 0 平滑放大。默认

anim: 1 从上掉落

anim: 2 从最底部往上滑入

anim: 3 从左滑入

anim: 4 从左翻滚

anim: 5 渐显

anim: 6 抖动

2.16 isOutAnim(类型：Boolean，默认：true)，关闭时的动画效果；

默认情况下，关闭层时会有一个过度动画。如果你不想开启，设置 isOutAnim: false 即可；

2.17 maxmin(类型：Boolean，默认：false)，最大|最小化；

该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可；

2.18 fixed(类型：Boolean，默认：true)，是否固定不动；

即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可；

2.19 resize(类型：Boolean，默认：true)，是否允许拉伸；

默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置

false即可。该参数对loading、tips层无效；

2.20

resizing(类型：Function，默认：null)，监听窗口拉伸动作；

当你拖拽弹层右下角对窗体进行尺寸调整时，如果你设定了该回调，则会执行。回调返回一个参数返回：当前层的DOM对象；

2.21 scrollbar(类型：Boolean，默认：true)，是否允许浏览器出现滚动条；

默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽；

2.22 maxWidth(类型：Number，默认：360)，最大宽度；

请注意：只有当area: 'auto'时，maxWidth的设定才有效。

2.23 maxHeight(类型：Number，默认：无)，最大高度；

请注意：只有当高度自适应时，maxHeight的设定才有效。

2.24 zIndex(类型：Number，默认：19891014(贤心生日 0.0)^_^)，层叠顺序；

一般用于解决和其它组件的层叠冲突。

2.25

move(类型：String/DOM/Boolean，默认：'.layui-layer-title')，触发拖动的元素；

默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move:

'.mine-move'。你还配置设定move: false来禁止拖拽

2.26 moveOut(类型：Boolean，默认：false)，是否允许拖拽到窗口外(用不着！)；

默认只能在窗口内拖拽，如果你想让拖到窗外，那么设定moveOut: true即可；

2.27

moveEnd(类型：Function，默认：null)，拖动完毕后的回调；

默认不会触发moveEnd，如果你需要，设定moveEnd:

function(layero){}即可。其中layero为当前层的DOM对象；

2.28 tips(类型：Number/Array，默认：2)，tips方向和颜色；

tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips:

3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']；

2.29

tipsMore(类型：Boolean，默认：false)，是否允许多个tips同时显示；

允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启；

2.30

success(类型：Function，默认：null)，层弹出后的成功回调；

当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM当前层索引。如：

layer.open({

content: '测试回调',

success: function(layero, index){

console.log(layero,

index);

}

});

2.31

yes(类型：Function，默认：null)，确定按钮回调；

该回调携带两个参数，分别为当前层索引、当前层DOM对象。如：

layer.open({

content: '测试回调',

yes: function(index, layero){

//do something

layer.close(index);

//如果设定了yes回调，需进行手工关闭

}

});

2.32

cancel(类型：Function，默认：null)，右上角关闭按钮的回调；

该回调携带两个参数，分别为：当前层索引参数(index)、当前层的DOM对象(layero)，默认会自动触发关闭。如果不想关闭，return

false即可，如；

cancel: function(index, layero){

if(confirm('确定要关闭么')){

//只有当点击confirm框的确定时，该层才会关闭

layer.close(index)

}

return false;

}

2.33

end(类型：Function，默认：null)，层销毁后触发的回调；

无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。

2.34

full/min/restore(类型：Function，默认：null)，分别代表最大化、最小化、还原后触发的回调；

携带一个参数，即当前层DOM；

3 调用方法

3.1 layer.config(options)，初始化全局配置；

可以配置加载路径、默认动画、默认皮肤，我应该用不上的！ ←_←

3.2 layer.ready(callback)，初始化就绪；

由于我们的layer内置了轻量级加载器，所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时，你最好是将弹层放入ready方法中，如：

//页面一打开就执行弹层

layer.ready(function(){

layer.msg('很高兴一开场就见到你');

});

3.3 layer.open(options)，原始核心方法；

基本上是露脸率最高的方法，不管是使用哪种方式创建层，都是走layer.open()，创建任何类型的弹层都会返回一个当前层索引，上述的options即是基础参数，另外，该文档统一采用options作为基础参数的标识例子：

var index = layer.open({

content: 'test'

});

//拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。

3.4 layer.alert(content, options,

yes)，普通信息框，yes是指回调函数；

调用很简单，关键设计灵便，它的参数是自动向左补齐的。通过第二个参数，可以设定各种你所需要的基础参数，但如果你不需要的话，直接写回调即可。

3.5 layer.confirm(content, options, yes,

cancel)，询问框；

类似系统confirm，但却远胜confirm，另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的，它的参数也是自动补齐的。

3.6 layer.msg(content, options, end)，提示框；

它简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后自动消失；还有“它的参数也是自动补齐的”；

3.7 layer.load(icon, options)，加载层；

特别注意一点：load默认是不会自动关闭的，因为你一般会在ajax回调体中关闭它。

//eg1

var index = layer.load();

//eg2

var index = layer.load(1); //换了种风格

//eg3

var index = layer.load(2, {time: 10*1000});

//又换了种风格，并且设定最长等待10秒

//关闭

layer.close(index);

3.8 layer.tips(content, follow,

options)，tips层，follow是指在哪个元素上提示；

它拥有和msg一样的低调和自觉，而且会智能定位，即灵活地判断它应该出现在哪边。默认是在元素右边弹出；

//eg1

layer.tips('只想提示地精准些', '#id');

//eg 2

$('#id').on('click', function(){

var that = this;

layer.tips('只想提示地精准些', that);

//在元素的事件回调体中，follow直接赋予this即可

});

//eg 3

layer.tips('在上面', '#id', {

tips: 1

});

4 辅助方法

4.1 layer.close(index)，关闭特定层；

关键看以下示例：

//当你想关闭当前页的某个层时

var index = layer.open();

var index = layer.;

var index = layer.load();

var index = layer.tips();

//正如你看到的，每一种弹层调用方式，都会返回一个index

layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可

//如果你想关闭最新弹出的层，直接获取layer.index即可

layer.close(layer.index);

//它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的

//当你在iframe页面关闭自身时

var index = parent.layer.getFrameIndex(window.name);

//先得到当前iframe层的索引

parent.layer.close(index); //再执行关闭

4.2 layer.closeAll(type)，关闭所有层；

如果你很懒，你不想去获取index你只想关闭。那么closeAll真的可以帮上你。如果你不指向层类型的话，它会销毁掉当前页所有的layer层。当然，如果你只想关闭某个类型的层，那么你可以

layer.closeAll(); //疯狂模式，关闭所有层

layer.closeAll('dialog'); //关闭信息框

layer.closeAll('page'); //关闭所有页面层

layer.closeAll('iframe'); //关闭所有的iframe层

layer.closeAll('loading'); //关闭加载层

layer.closeAll('tips'); //关闭所有的tips层

4.3 layer.style(index, cssStyle)，重新定义层的样式；

该方法对loading层和tips层无效。参数index为层的索引，cssStyle允许你传入任意的css属性

//重新给指定层设定width、top等

layer.style(index, {

width: '1000px',

top: '10px'

});

4.4 layer.title(title, index)，改变层的标题；

使用方式：layer.title('标题变了', index)；

4.5 layer.getChildFrame(selector,

index)，获取iframe页的DOM；

当你试图在当前页获取iframe页的DOM元素时，你可以用此方法。selector即iframe页的选择器；

示例如下：

layer.open({

type: 2,

content: 'test/iframe.html',

success: function(layero, index){

var body =

layer.getChildFrame('body', index);

var iframeWin =

window[layero.find('iframe')[0]['name']];

//得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

console.log(body.html())

//得到iframe页的body内容

body.find('input').val('Hi，我是从父页来的')

}

});

4.6

layer.getFrameIndex(windowName)，获取特定iframe层的索引；

此方法一般用于在iframe页关闭自身时用到。

//假设这是iframe页

var index = parent.layer.getFrameIndex(window.name);

//先得到当前iframe层的索引

parent.layer.close(index); //再执行关闭

4.7 layer.iframeAuto(index)，指定iframe层自适应；

调用该方法时，iframe层的高度会重新进行适应；

4.8 layer.iframeSrc(index, url)，重置特定iframe url；

似乎不怎么常用的样子。使用方式：layer.iframeSrc(index,

'http://sentsin.com')

4.9 layer.setTop(layero)，置顶当前窗口；

非常强大的一个方法，虽然一般很少用。但是当你的页面有很多很多layer窗口，你需要像Window窗体那样，点击某个窗口，该窗体就置顶在上面，那么setTop可以来轻松实现。它采用巧妙的逻辑，以使这种置顶的性能达到最优

//通过这种方式弹出的层，每当它被选择，就会置顶。

layer.open({

type: 2,

shade: false,

area: '500px',

maxmin: true,

content: 'http://www.layui.com',

zIndex: layer.zIndex, //重点1

success: function(layero){

layer.setTop(layero);

//重点2

}

});

4.10

layer.full()、layer.min()、layer.restore()，手工执行最大小化、还原；

一般用于在自定义元素上触发最大化、最小化和全屏。

5 其他弹出层

5.1 layer.prompt(options, yes)，输入层；

prompt的参数也是向前补齐的。options不仅可支持传入基础参数，还可以传入prompt专用的属性。当然，也可以不传。yes携带value

表单值index 索引elem 表单元素

//prompt层新定制的成员如下

{

formType: 1,

//输入框类型，支持0(文本)默认1(密码)2(多行文本)

value: '', //初始时的值，默认空字符

maxlength: 140, //可输入文本的最大长度，默认500

}

//例子1

layer.prompt(function(value, index, elem){

; //得到value

layer.close(index);

});

//例子2

layer.prompt({

formType: 2,

value: '初始值',

title: '请输入值',

area: ['800px', '350px'] //自定义文本域宽高

}, function(value, index, elem){

; //得到value

layer.close(index);

});

5.2 layer.tab(options)，tab层(强大！！！)；

tab层只单独定制了一个成员，即tab: []，这个好像没有什么可介绍的，简单粗暴看例子

layer.tab({

area: ['600px', '300px'],

tab: [{

title:

'TAB1',

content: '内容1'

}, {

title:

'TAB2',

content: '内容2'

}, {

title:

'TAB3',

content: '内容3'

}]

});

5.3 layer.photos(options)，相册层；

相册层=图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。

这块功能参考官方文档，因为需要看下效果图！官方文档：http://www.layui.com/doc/modules/layer.html#layer.photos

小结

平时经常使用的消息对话框、状态提示信息、弹窗、输入框、图片查看器，还有弹出选项卡这些功能就是layer具备的能力！设计简洁功能多样！可以说很强大！

参考官方文档：http://www.layui.com/doc/