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