1. 弹层组件加载名称: layer。
2. layer至今仍作为layui的代表作, 甚至让很多人都误以为layui = layer ui, 所以再次强调layer只是作为layui的一个弹层模块, 由于其用户基数较大, 所以至今仍把她作为独立组件来维护。
3. 使用场景
3.1. 由于layer可以独立使用, 也可以通过Layui模块化使用。
场景 |
用前准备 |
调用方式 |
1. 作为独立组件使用 |
如果你只是单独想使用layer, 你可以去layer独立版本官网下载组件包。你需要在你的页面首先引入jQuery1.8以上的任意版本, 然后引入layer.js。 |
通过script标签引入layer.js后, 直接用即可。 |
2. layui模块化使用 |
如果你使用的是layui, 那么你直接在官网下载layui框架即可, 无需单独引入jQuery和layer.js, 但需要引入layui.css和layui.js。 |
通过layui.use('layer', callback)加载模块。 |
3.2. 作为独立组件使用layer
<!-- 一定要先引入jquery.js, 再引入layer.js -->
<script src="layer-v3.2.0/layer/jquery.js"></script>
<script src="layer-v3.2.0/layer/layer.js"></script>
<script type="text/javascript">
layer.msg('hello');
</script>
3.3. 在layui中使用layer
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('hello');
});
4. layer.open(options) - 原始核心方法
4.1. 不管是使用哪种方式创建层, 都是走layer.open(), 创建任何类型的弹层都会返回一个当前层索引。options即是基础参数。
5. type - 基本层类型
5.1. 类型: Number。默认值: 0。
5.2. layer提供了5种层类型。可传入的值有: 0(信息框, 默认), 1(页面层), 2(iframe层), 3(加载层), 4(tips层)。若你采用layer.open({type: 1})方式调用, 则type为必填项(信息框除外)。
6. title - 标题
6.1. 类型: String/Array/Boolean。默认值: '信息'。
6.2. title支持三种类型的值, 若你传入的是普通的字符串, 如title: '我是标题', 那么只会改变标题文本; 若你还需要自定义标题区域样式, 那么你可以title: ['文本', 'font-size:18px;'], 数组第二项可以写任意css样式; 如果你不想显示标题栏, 你可以title: false。
7. content - 内容
7.1. 类型: String/DOM/Array。默认值: ''。
7.2. content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。譬如:
/!*
如果是页面层
*/
layer.open({
type: 1,
content: '传入任意的文本或html' // 这里content是一个普通的String
});
layer.open({
type: 1,
content: $('#id') // 这里content是一个DOM, 注意: 最好该元素要存放在body最外层, 否则可能被其它的相对元素所影响
});
/!*
如果是iframe层
*/
layer.open({
type: 2,
content: 'http://sentsin.com' // 这里content是一个URL, 如果你不想让iframe出现滚动条, 你还可以content: ['http://sentsin.com', 'no']
});
/!*
如果是用layer.open执行tips层
*/
layer.open({
type: 4,
content: ['内容', '#id'] // 数组第二项即吸附元素选择器或者DOM
});
// Ajax获取
$.post('url', {}, function(obj){
layer.open({
type: 1,
content: obj.id + obj. name // 这里解析obj的属性
});
});
8. skin - 样式类名
8.1. 类型: String。默认值: ''。
8.2. skin不仅允许你传入layer内置的样式class名, 还可以传入您自定义的class名。这是一个很好的切入点, 意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有: layui-layer-lan、layui-layer-molv, 未来我们还会选择性地内置更多, 但更推荐您自己来定义。以下是一个自定义风格的简单例子:
body .layui-layer-c00 .layui-layer-title { background: #c00; color: #fff; border: none; }
body .layui-layer-c00 .layui-layer-content { background: #5FB878; }
body .layui-layer-c00 .layui-layer-btn { border-top: 1px solid #E9E7E7 }
body .layui-layer-c00 .layui-layer-btn .layui-layer-btn0 { background: #01AAED; }
body .layui-layer-c00 .layui-layer-btn .layui-layer-btn1 { background: #FFB800; }
8.3. skin对加载层和tips层没有作用。
9. area - 宽高
9.1. 类型: String/Array。默认值: 'auto'。
9.2. 在默认状态下, layer是宽高都自适应的, 但当你只想定义宽度时, 你可以area: '500px', 高度仍然是自适应的。当你宽高都要定义时, 你可以area: ['500px', '300px']。
10. offset - 坐标
10.1. 类型: String/Array。默认值: 垂直水平居中。
10.2. offset默认情况下不用设置。但如果你不想垂直水平居中, 你还可以进行以下赋值:
11. icon - 图标
11.1. 图标是信息框和加载层的私有参数。
11.2. 类型: Number。默认值: -1(信息框), 0(加载层)。
11.3. 信息框默认不显示图标, 当你想显示图标时, 默认皮肤可以传入0-6。如果是加载层, 可以传入0-2。
12. btn - 按钮
12.1. 类型: String/Array。默认值: '确认'。
12.2. 信息框模式时, btn默认是一个确认按钮, 其它层类型则默认不显示, 加载层和tips层则无效。当您只想自定义一个按钮时, 你可以btn: '我知道了', 当你要定义两个按钮时, 你可以btn: ['yes', 'no']。当然, 你也可以定义更多按钮, 比如: btn: ['按钮1', '按钮2', '按钮3', …], 按钮1的回调是yes, 而从按钮2开始, 则回调为btn2: function(){}, 以此类推。如:
layer.open({
btn: ['按钮一', '按钮二', '按钮三']
,yes: function(index, layero){
// 按钮[按钮一]的回调
}
,btn2: function(index, layero){
// 按钮[按钮二]的回调
// return false; 开启该代码可禁止点击该按钮关闭层
}
,btn3: function(index, layero){
// 按钮[按钮三]的回调
// return false; 开启该代码可禁止点击该按钮关闭层
}
,cancel: function(){
// 右上角关闭按钮回调
// return false; 开启该代码可禁止点击该按钮关闭层
}
});
13. btnAlign - 按钮排列
13.1. 类型: String。默认值: r。
13.2. 你可以快捷定义按钮的排列位置, btnAlign的默认值为r, 即右对齐。该参数可支持的赋值如下:
14. closeBtn - 关闭按钮
14.1. 类型: String/Boolean。默认值: 1。
14.2. layer提供了两种风格的关闭按钮, 可通过配置1和2来展示, 如果不显示, 则closeBtn: 0。
15. shade - 遮罩
15.1. 类型: String/Array/Boolean。默认值: 0.3。
15.2. 即弹层外区域。默认是0.3透明度的黑色背景('#000')。如果你想定义别的颜色, 可以shade: [0.8, '#393D49']; 如果你不想显示遮罩, 可以shade: 0。
16. shadeClose - 是否点击遮罩关闭
16.1. 类型: Boolean。默认值: false。
16.2. 如果你的shade是存在的, 那么你可以设定shadeClose来控制点击弹层外区域关闭。
17. time - 自动关闭所需毫秒
17.1. 类型: Number。默认值: 0。
17.2. 默认不会自动关闭。当你想自动关闭时, 可以time: 5000, 即代表5秒后自动关闭, 注意单位是毫秒(1秒=1000毫秒)。
18. id - 用于控制弹层唯一标识
18.1. 类型: String。默认值: 空字符。
18.2. 设置该值后, 不管是什么类型的层, 都只允许同时弹出一个。一般用于页面层和iframe层模式。
19. anim - 弹出动画
19.1. 类型: Number。默认值: 0。
19.2. 我们的出场动画全部采用CSS3。目前anim可支持的动画类型有0-6如果不想显示动画, 设置anim: -1 即可。
20. isOutAnim - 关闭动画
20.1. 类型: Boolean。默认值: true。
20.2. 默认情况下, 关闭层时会有一个过度动画。如果你不想开启, 设置isOutAnim: false即可。
21. maxmin - 最大最小化
21.1. 类型: Boolean。默认值: false。
21.2. 该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可。
22. fixed - 固定
22.1. 类型: Boolean。默认值: true。
22.2. 即鼠标滚动时, 层是否固定在可视区域。如果不想, 设置fixed: false即可。
23. resize - 是否允许拉伸
23.1. 类型: Boolean。默认值: true。
23.2. 默认情况下, 你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能, 设置false即可。该参数对loading、tips层无效。
24. resizing - 监听窗口拉伸动作
24.1. 类型: Function。默认值: null。
24.2. 当你拖拽弹层右下角对窗体进行尺寸调整时, 如果你设定了该回调, 则会执行。回调返回一个参数: 当前层的DOM对象。
resizing: function(layero){
console.log(layero);
}
25. zIndex - 层叠顺序
25.1. 类型: Number。默认值: 19891014。
25.2. 一般用于解决和其它组件的层叠冲突。
26. move - 触发拖动的元素
26.1. 类型: String/DOM/Boolean。默认值: '.layui-layer-title'。
26.2. 默认是触发标题区域拖拽。如果你想单独定义, 指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽。
27. moveOut - 是否允许拖拽到窗口外
27.1. 类型: Boolean。默认值: false。
27.2. 默认只能在窗口内拖拽, 如果你想让拖到窗外, 那么设定moveOut: true即可。
28. moveEnd - 拖动完毕后的回调方法
28.1. 类型: Function。默认值: null。
28.2. 默认不会触发moveEnd, 如果你需要, 设定moveEnd: function(layero){}即可。其中layero为当前层的DOM对象。
moveEnd: function(layero){
console.log(layero);
}
29. tips - tips方向和颜色
29.1. 类型: Number/Array。默认值: 2。
29.2. tips层的私有参数。支持上右下左四个方向, 通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色, 可以设定tips: [1, '#c00']。
30. tipsMore - 是否允许多个tips
30.1. 类型: Boolean。默认值: false。
30.2. 允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启。
31. success - 层弹出后的成功回调方法
31.1. 类型: Function。默认值: null。
31.2. 当你需要在层创建完毕时即执行一些语句, 可以通过该回调。success会携带两个参数, 分别是当前层DOM当前层索引。如:
success: function(layero, index){
console.log(layero, index);
}
32. yes - 确定按钮回调方法
32.1. 类型: Function。默认值: null。
32.2. 该回调携带两个参数, 分别为当前层索引、当前层DOM对象。如:
yes: function(index, layero){
console.log(layero, index);
}
33. cancel - 右上角关闭按钮触发的回调
33.1. 类型: Function。默认值: null。
33.2. 该回调携带两个参数, 分别为: 当前层索引参数(index)、当前层的DOM对象(layero), 默认会自动触发关闭。如果不想关闭, return false即可, 如:
cancel: function(index, layero){
console.log(layero, index);
}
34. end - 层销毁后触发的回调
34.1. 类型: Function。默认值: null。
34.2. 无论是确认还是取消, 只要层被销毁了, end都会执行, 不携带任何参数。
end: function(){
console.log('---end---');
}
35. full/min/restore -分别代表最大化、最小化、还原后触发的回调
35.1. 类型: Function。默认值: null。
35.2. 携带一个参数, 即当前层DOM。
full: function(layero){
console.log(layero);
}
min: function(layero){
console.log(layero);
}
restore: function(layero){
console.log(layero);
}
36. layer.config(options) - 初始化全局配置
36.1. 这是一个可以重要也可以不重要的方法, 重要的是, 它的权利真的很大, 尤其是在模块化加载layer时, 你会发现你必须要用到它。它不仅可以配置一些诸如路径、加载的模块, 甚至还可以决定整个弹层的默认参数。而说它不重要, 是因为多数情况下, 你会发现, 你似乎不是那么十分需要它。
36.2. layer.config可以配置层默认的基础参数, 如:
layer.config({
anim: 1, // 默认动画风格
skin: 'layui-layer-molv' // 默认皮肤
…
});
// 除此之外, extend还允许你加载拓展的css皮肤, 如:
layer.config({
// 如果是独立版的layer, 则将myskin存放在./skin目录下
// 如果是layui中使用layer, 则将myskin存放在./css/modules/layer目录下
extend: 'myskin/style.css'
});
37. layer.ready(callback) - 初始化就绪
37.1. 由于我们的layer内置了轻量级加载器, 所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时, 你最好是将弹层放入ready方法中, 如:
// 页面一打开就执行弹层
layer.ready(function(){
layer.msg('很高兴一开场就见到你');
});
38. layer.alert(content, options, yes) - 普通信息框
38.1. 它的弹出似乎显得有些高调, 一般用于对用户造成比较强烈的关注, 类似系统alert, 但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数, 可以设定各种你所需要的基础参数, 但如果你不需要的话, 直接写回调即可。如:
// eg1
layer.alert('只想简单的提示');
// eg2
layer.alert('加了个图标', {icon: 1}); // 这时如果你也还想执行yes回调, 可以放在第三个参数中。
// eg3
layer.alert('有了回调', function(index){
// do something
layer.close(index);
});
39. layer.confirm(content, options, yes, cancel) - 确认框
39.1. 类似系统confirm, 但却远胜confirm, 另外它不是和系统的confirm一样阻塞, 你需要把交互的语句放在回调体中。同样的, 它的参数也是自动补齐的。
// eg1
layer.confirm('不开心。');
// eg2
layer.confirm('不开心。', {icon: 3});
// eg3
layer.confirm('不开心。', function(index){
layer.close(index);
}, function(index){
layer.close(index);
});
// eg4
layer.confirm('不开心。', {icon: 3}, function(index){
layer.close(index);
}, function(index){
layer.close(index);
});
40. layer.msg(content, options, end) - 提示框
40.1. 它简单, 而且足够得自觉, 它不仅占据很少的面积, 而且默认还会3秒后自动消失。在作用方面, 它坚持零用户操作。而且它的参数也是自动补齐的。
// eg1
layer.msg('只想弱弱提示');
// eg2
layer.msg('有表情地提示', {icon: 6});
// eg3
layer.msg('关闭后想做些什么', function(){
// do something
});
// eg4
layer.msg('同上', {
icon: 1,
time: 2000 // 2秒关闭(如果不配置, 默认是3秒)
}, function(){
// do something
});
41. layer.load(icon, options) - 加载层
41.1. type:3的深度定制。load并不需要你传太多的参数, 但如果你不喜欢默认的加载风格, 你还有选择空间。icon支持传入0-2, 如果是0, 无需传。另外特别注意一点: 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);
42. layer.tips(content, follow, options) - tips层
42.1. type:4的深度定制。它拥有和msg一样的低调和自觉, 而且会智能定位, 即灵活地判断它应该出现在哪边。默认是在元素右边弹出。
43. layer.close(index) - 关闭特定层
43.1. 关于它似乎没有太多介绍的必要, 唯一让你疑惑的, 可能就是这个index了吧。事实上它非常容易得到。
// 调用如下方法的时候都会返回一个index值
var index = layer.open();
var index = layer.alert();
var index = layer.msg();
var index = layer.confirm();
var index = layer.tips();
var index = layer.load();
var index = layer.prompt();
var index = layer.tab();
// 你只需要给layer.close(index)方法传入它们对应的index, 就可以关闭特定层
layer.close(index);
// 如果你想关闭最新弹出的层, 直接获取layer.index即可
layer.close(layer.index);
44. layer.closeAll(type) - 关闭所有层
44.1. 如果你很懒, 你不想去获取index你只想关闭。那么closeAll真的可以帮上你。如果你不指向层类型的话, 它会销毁掉当前页所有的layer层。当然, 如果你只想关闭某个类型的层, 那么你可以:
layer.closeAll(); // 疯狂模式, 关闭所有层
layer.closeAll('dialog'); // 关闭所有的信息框
layer.closeAll('page'); // 关闭所有的页面层
layer.closeAll('iframe'); // 关闭所有的iframe层
layer.closeAll('loading'); // 关闭所有的加载层
layer.closeAll('tips'); // 关闭所有的tips层
45. layer.style(index, cssStyle) - 重新定义层的样式
45.1. 该方法对loading层和tips层无效。参数index为层的索引, cssStyle允许你传入任意的css属性:
// 重新给指定层设定width、top等
layer.style(index, {
width: '1000px',
top: '10px'
});
46. layer.title(title, index) - 改变层的标题
46.1. 使用方式: layer.title('标题变了', index)。
47. layer.getChildFrame(selector, index) - 获取iframe页的DOM
47.1. 当你试图在当前页获取iframe页的DOM元素时, 你可以用此方法。selector即iframe页的选择器。
48. layer.iframeAuto(index) - 指定iframe层自适应
48.1. 调用该方法时, iframe层的高度会重新进行适应。
49. layer.iframeSrc(index, url) - 重置特定iframe url
49.1. 使用方式: layer.iframeSrc(index, 'http://sentsin.com')。
50. layer.setTop(layero) -置顶当前窗口
50.1. 非常强大的一个方法, 虽然一般很少用。但是当你的页面有很多很多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
}
});
51. layer.full()、layer.min()、layer.restore() - 手工执行最大小化
51.1. 一般用于在自定义元素上触发最大化、最小化和全屏。
52. layer.prompt(options, yes) - 输入层
52.1. prompt的参数也是向前补齐的。options不仅可支持传入基础参数, 还可以传入prompt专用的属性, 当然, 也可以不传。yes携带value 表单值、index 索引、elem 表单元素:
// eg1
layer.prompt({
formType: 1,
value: '',
maxlength: 140
});
// eg2
layer.prompt(function(value, index, elem){
alert(value);
layer.close(index);
});
// eg3
layer.prompt({
formType: 2,
value: '',
maxlength: 140
},function(value, index, elem){
alert(value);
layer.close(index);
});
53. layer.tab(options) - tab层
53.1. tab层只单独定制了一个成员, 即tab: [], 简单粗暴看例子:
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
54. layer.photos(options) - 相册层
54.1. 相册层, 也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。
54.2. 如果是json传入, 如下:
<script type="text/javascript">
layui.use(['util', 'layer'], function() {
var layer = layui.layer
,util = layui.util;
var json = {
"title": "vivo NEX 3", // 相册标题
"id": 123, // 相册id
"start": 0, // 初始显示的图片序号, 默认0
"data": [ // 相册包含的图片, 数组格式
{
"alt": "vivo NEX 3 正反面图",
"pid": 100101, // 图片id
"src": "vivo_big_01.png", // 原图地址
"thumb": "vivo_01.png" // 缩略图地址
},
{
"alt": "vivo NEX 3 正面图",
"pid": 100102, // 图片id
"src": "vivo_big_02.png", // 原图地址
"thumb": "vivo_02.png" // 缩略图地址
},
{
"alt": "vivo NEX 3 反面图",
"pid": 100103, // 图片id
"src": "vivo_big_03.png", // 原图地址
"thumb": "vivo_03.png" // 缩略图地址
},
{
"alt": "vivo NEX 3 多色系图",
"pid": 100104, // 图片id
"src": "vivo_big_04.png", // 原图地址
"thumb": "vivo_04.png" // 缩略图地址
}
]
};
layer.photos({
photos: json
,anim: 1 // 0-6的选择, 指定弹出图片动画类型, 默认随机
});
});
</script>
54.3. 如果是直接从页面中获取图片, 那么需要指向图片的父容器, 并且你的img可以设定一些规定的属性(但不是必须的):
<div id="layer-photos-demo" class="layer-photos-demo">
<img layer-pid="100101" layer-src="vivo_big_01.png" src="vivo_01.png" alt="vivo NEX 3 正反面图">
<img layer-pid="100102" layer-src="vivo_big_02.png" src="vivo_02.png" alt="vivo NEX 3 正面图">
<img layer-pid="100103" layer-src="vivo_big_03.png" src="vivo_03.png" alt="vivo NEX 3 反面图">
<img layer-pid="100104" layer-src="vivo_big_04.png" src="vivo_04.png" alt="vivo NEX 3 多色系图">
</div>
<script type="text/javascript">
layui.use(['util', 'layer'], function() {
var layer = layui.layer
,util = layui.util;
layer.photos({
photos: '#layer-photos-demo'
,anim: 5 // 0-6的选择, 指定弹出图片动画类型, 默认随机
,tab: function(pic, layero){
console.log('pic = ' + pic + ', layero = ' + layero);
}
});
});
</script>
54.4. 另外, photos还有个tab回调, 切换图片时触发。
55. layer.open()方法例子
55.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>layer.open(options)方法</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
<style type="text/css">
body .layui-layer-c00 .layui-layer-title { background: #c00; color: #fff; border: none; }
body .layui-layer-c00 .layui-layer-content { background: #5FB878; }
body .layui-layer-c00 .layui-layer-btn { border-top: 1px solid #E9E7E7 }
body .layui-layer-c00 .layui-layer-btn .layui-layer-btn0 { background: #01AAED; }
body .layui-layer-c00 .layui-layer-btn .layui-layer-btn1 { background: #FFB800; }
</style>
</head>
<body>
<br /><br />
<button id="id0" class="layui-btn" lay-active="type0">(信息框, 默认)layer.open({type: 0})</button>
<button id="id1" class="layui-btn" lay-active="type1">(页面层)layer.open({type: 1})</button>
<button id="id2" class="layui-btn" lay-active="type2">(iframe层)layer.open({type: 2})</button>
<button id="id3" class="layui-btn" lay-active="type3">(加载层)layer.open({type: 3})</button>
<button id="id4" class="layui-btn" lay-active="type4">(tips层)layer.open({type: 4})</button> <br /> <br />
<button id="id5" class="layui-btn" lay-active="type0_1">多按钮信息框</button>
<button id="id6" class="layui-btn" lay-active="type0_2">拖动内容区域可移动</button>
<button id="id7" class="layui-btn" lay-active="type4_1">上面显示tips层</button>
<button id="id8" class="layui-btn" lay-active="type4_2">下面显示tips层</button>
<button id="id9" class="layui-btn" lay-active="type4_3">左面显示tips层</button>
<script type="text/javascript">
layui.use(['util', 'layer'], function() {
var layer = layui.layer
,util = layui.util;
var id1BtnDoc = document.getElementById('id1');
var top = id1BtnDoc.offsetHeight + id1BtnDoc.offsetTop + 3;
var left = id1BtnDoc.offsetLeft;
util.event('lay-active', {
type0: function() {
layer.open({
type: 0
,title: '我是默认的信息框'
,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
,icon: 0
,closeBtn: false
,shadeClose: true
,resize: false
});
},
type1: function() {
layer.open({
type: 1
,title: '我是页面层'
,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
,skin: 'layui-layer-lan'
,area: ['500px', '300px']
,offset: [top, left]
,closeBtn: 2
,shade: 0
,id: 'pagelayer'
,anim: 1
,isOutAnim: false
,resize: false
});
},
type2: function() {
layer.open({
type: 2
,title: '我是iframe层'
,content: 'http://www.baidu.com'
,skin: 'layui-layer-molv'
,shade: 0.7
,shadeClose: true
,id: 'iframe'
,anim: 2
,maxmin: true
,resizing: function(layero){
console.log(layero);
}
,full: function(layero){
console.log(layero);
}
,min: function(layero){
console.log(layero);
}
,restore: function(layero){
console.log(layero);
}
});
},
type3: function() {
layer.open({
type: 3
,title: '我是加载层'
,content: '正在努力加载, 请耐心等待...'
,icon: 0
,shade: 0.1
,time: 3000
,anim: 3
});
},
type4: function() {
layer.open({
type: 4
,title: '我是tips层'
,content: ['content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。', "#id4"]
,shade: false
,time: 3000
,anim: 4
,tipsMore: true
});
},
type0_1: function() {
layer.open({
type: 0
,title: '我是默认的信息框'
,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
,skin: 'layui-layer-c00'
,area: ['800px', '500px']
,offset: 'rb'
,icon: 1
,btn: ['yes', 'no']
,btnAlign: 'c'
,closeBtn: 1
,shade: 0.9
,shadeClose: true
,anim: 5
,resize: false
,success: function(layero, index){
console.log(layero, index);
}
,yes: function(index, layero){
console.log(layero, index);
}
,btn2: function(index, layero){
console.log(layero, index);
}
,cancel: function(index, layero){
console.log(layero, index);
}
,end: function(){
console.log('---end---');
}
});
},
type0_2: function() {
layer.open({
type: 0
,title: '我是默认的信息框'
,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
,icon: 2
,anim: 6
,move: '.layui-layer-content'
,moveOut: true
,moveEnd: function(layero){
console.log(layero);
}
});
},
type4_1: function() {
layer.open({
type: 4
,title: '我是tips层'
,content: ['content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。', "#id7"]
,shade: false
,time: 8000
,tips: 1
,tipsMore: true
});
},
type4_2: function() {
layer.open({
type: 4
,title: '我是tips层'
,content: ['content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。', "#id8"]
,shade: false
,time: 8000
,tips: 3
,tipsMore: true
});
},
type4_3: function() {
layer.open({
type: 4
,title: '我是tips层'
,content: ['content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。', "#id9"]
,shade: false
,time: 8000
,tips: 4
,tipsMore: true
});
}
});
});
</script>
</body>
</html>
56. layer单独使用例子
56.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>layer单独使用</title>
<!-- 一定要先引入jquery.js, 再引入layer.js -->
<script src="layer-v3.2.0/layer/jquery.js"></script>
<script src="layer-v3.2.0/layer/layer.js"></script>
</head>
<body>
<div style="width: 500px; height: 2000px; background: #c2c2c2;">
</div>
<script type="text/javascript">
;!function(){
layer.ready(function(){
layer.open({
type: 0
,title: '我是默认的信息框'
,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
,offset: 'lt'
,fixed: false
});
});
}();
</script>
</body>
</html>
57. 例子
57.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>弹层 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<button id="id0" class="layui-btn" lay-active="type0">(信息框, 默认)layer.open({type: 0})</button>
<button id="id1" class="layui-btn" lay-active="type1">(页面层)layer.open({type: 1})</button>
<button id="id2" class="layui-btn" lay-active="type2">(iframe层)layer.open({type: 2})</button>
<button id="id3" class="layui-btn" lay-active="type3">(加载层)layer.open({type: 3})</button>
<button id="id4" class="layui-btn" lay-active="type4">(tips层)layer.open({type: 4})</button> <br /> <br />
<button id="close-1" class="layui-btn" lay-active="closeAll">关闭所有层</button>
<button id="close-2" class="layui-btn" lay-active="closeLatest">关闭最新弹</button>
<button id="close-3" class="layui-btn" lay-active="closeDialog">关闭所有的信息框</button>
<button id="close-4" class="layui-btn" lay-active="closePage">关闭所有的页面层</button>
<button id="close-5" class="layui-btn" lay-active="closeIframe">关闭所有的iframe层</button>
<button id="close-6" class="layui-btn" lay-active="closeLoading">关闭所有的加载层</button>
<button id="close-7" class="layui-btn" lay-active="closeTips">关闭所有的tips层</button>
<br /> <br />
<button id="id5" class="layui-btn" lay-active="alert">layer.alert()</button>
<button id="id6" class="layui-btn" lay-active="msg">layer.msg()</button>
<button id="id7" class="layui-btn" lay-active="confirm">layer.confirm()</button>
<button id="id8" class="layui-btn" lay-active="tips">layer.tips()</button>
<button id="id9" class="layui-btn" lay-active="load">layer.load()</button>
<button id="id10" class="layui-btn" lay-active="prompt1">layer.prompt() 1</button>
<button id="id11" class="layui-btn" lay-active="prompt2">layer.prompt() 2</button>
<button id="id12" class="layui-btn" lay-active="prompt3">layer.prompt() 3</button>
<button id="id13" class="layui-btn" lay-active="tab">layer.tab()</button> <br /> <br />
<div id="layer-photos-demo" class="layer-photos-demo">
<img layer-pid="100101" layer-src="vivo_big_01.png" src="vivo_01.png" alt="vivo NEX 3 正反面图">
<img layer-pid="100102" layer-src="vivo_big_02.png" src="vivo_02.png" alt="vivo NEX 3 正面图">
<img layer-pid="100103" layer-src="vivo_big_03.png" src="vivo_03.png" alt="vivo NEX 3 反面图">
<img layer-pid="100104" layer-src="vivo_big_04.png" src="vivo_04.png" alt="vivo NEX 3 多色系图">
</div>
<script type="text/javascript">
layui.use(['util', 'layer'], function() {
var layer = layui.layer
,util = layui.util;
layer.photos({
photos: '#layer-photos-demo'
,anim: 5 // 0-6的选择, 指定弹出图片动画类型, 默认随机
,tab: function(pic, layero){
console.log('pic = ' + pic + ', layero = ' + layero);
}
});
util.event('lay-active', {
closeAll: function() {
layer.closeAll(); // 疯狂模式, 关闭所有层
},
closeLatest: function() {
layer.close(layer.index); // 关闭最新弹出的层
},
closeDialog: function() {
layer.closeAll('dialog'); // 关闭所有的信息框
},
closePage: function() {
layer.closeAll('page'); // 关闭所有的页面层
},
closeIframe: function() {
layer.closeAll('iframe'); // 关闭所有的iframe层
},
closeLoading: function() {
layer.closeAll('loading'); // 关闭所有的加载层
},
closeTips: function() {
layer.closeAll('tips'); // 关闭所有的tips层
},
type0: function() {
var idx = layer.open({
type: 0
,title: '我是默认的信息框'
,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
,shade: 0
});
console.log('type0 idx = ' + idx);
},
type1: function() {
var idx = layer.open({
type: 1
,title: '我是页面层'
,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
,shade: 0
,area: ['500px', '300px']
});
console.log('type1 idx = ' + idx);
},
type2: function() {
var idx = layer.open({
type: 2
,title: '我是iframe层'
,content: 'http://www.baidu.com'
,shade: 0
});
console.log('type2 idx = ' + idx);
},
type3: function() {
var idx = layer.open({
type: 3
,title: '我是加载层'
,content: '正在努力加载, 请耐心等待...'
,icon: 0
,shade: false
});
console.log('type3 idx = ' + idx);
},
type4: function() {
var idx = layer.open({
type: 4
,title: '我是tips层'
,content: ['content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。', "#id4"]
,shade: false
});
console.log('type4 idx = ' + idx);
},
alert: function() {
var idx = layer.alert('酷毙了', {icon: 1, shade: 0}, function(index){
console.log('---alert yes方法---');
});
console.log('alert idx = ' + idx);
},
msg: function() {
var idx = layer.msg('不开心。', {time: 0, icon: 2, shade: 0}, function(index){
console.log('---msg end方法---');
});
console.log('msg idx = ' + idx);
},
confirm: function() {
var idx = layer.confirm('不开心。', {icon: 3, shade: 0}, function(index){
console.log('---confirm yes方法---');
}, function(index){
console.log('---confirm cancel方法---');
});
console.log('confirm idx = ' + idx);
},
tips: function() {
var idx = layer.tips('我是tips层', '#id8', {time: 0, shade: 0, tips: 3});
console.log('tips idx = ' + idx);
},
load: function() {
var idx = layer.load(1, {content: '我是加载层', shade: 0});
console.log('load idx = ' + idx);
},
prompt1: function() {
var idx = layer.prompt({
formType: 1 // 输入框类型, 支持0是文本(默认值), 1是密码, 2是多行文本
,value: '' // 初始时的值, 默认空字符
,maxlength: 140 // 可输入文本的最大长度, 默认500
,shade: 0
});
console.log('prompt1 idx = ' + idx);
},
prompt2: function() {
layer.prompt(function(value, index, elem){
alert(value); //得到value
layer.close(index);
});
},
prompt3: function() {
layer.prompt({
formType: 2, // 输入框类型, 支持0是文本(默认值), 1是密码, 2是多行文本
value: '', // 初始时的值, 默认空字符
maxlength: 140 // 可输入文本的最大长度, 默认500
},function(value, index, elem){
alert(value); // 得到value
layer.close(index);
});
},
tab: function() {
var idx = layer.tab({
area: ['600px', '300px']
,tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
,shade: 0
});
console.log('tab idx = ' + idx);
}
});
});
</script>
</body>
</html>