介绍
功能强大的弹层组件,可以以内置模块来引用,也可以作为独立模块引用;独立模块见: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