相册id是什么：026-弹层组件

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更灵便。它的参数是自动向左补齐的。通过第二个参数, 可以设定各种你所需要的基础参数, 但如果你不需要的话, 直接写回调即可。如:

// eg1layer.alert('只想简单的提示');// eg2layer.alert('加了个图标', {icon: 1}); // 这时如果你也还想执行yes回调, 可以放在第三个参数中。// eg3layer.alert('有了回调', function(index){// do something layer.close(index);});

39. layer.confirm(content, options, yes, cancel) - 确认框

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

// eg1layer.confirm('不开心。');// eg2layer.confirm('不开心。', {icon: 3});// eg3layer.confirm('不开心。', function(index){layer.close(index);}, function(index){layer.close(index);});// eg4layer.confirm('不开心。', {icon: 3}, function(index){layer.close(index);}, function(index){layer.close(index);});

40. layer.msg(content, options, end) - 提示框

40.1. 它简单, 而且足够得自觉, 它不仅占据很少的面积, 而且默认还会3秒后自动消失。在作用方面, 它坚持零用户操作。而且它的参数也是自动补齐的。

// eg1layer.msg('只想弱弱提示');// eg2layer.msg('有表情地提示', {icon: 6}); // eg3layer.msg('关闭后想做些什么', function(){// do something});// eg4layer.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回调体中关闭它。

// eg1var index = layer.load();// eg2var index = layer.load(1); // 换了种风格// eg3var 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, // 重点1success: 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 表单元素:

// eg1layer.prompt({formType: 1,value: '',maxlength: 140});// eg2layer.prompt(function(value, index, elem){ alert(value); layer.close(index);});// eg3layer.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>