layui框架——弹出层layer

 两种调用方法：

1、引用独立的layer.js文件

1. 引入好layer.js后，直接用即可

2、调用layui中的layer模块

1. layui.use('layer', function(){

2. var layer = layui.layer;

3.  

4. layer.msg('hello');

5. });

基础参数

1、type：基本层类型

使用方法：

1. layui.use('layer',function(){

2. var layer=layui.layer;

3. layer.open({

4. type:0

5. })

6. })

 layer提供了5种层类型，分别为0~4，默认为0。其对应形式如下：

2、title-标题

类型：String/Array/Boolean，默认：‘信息’

String：标题文本

Array：例如title: ['文本', 'font-size:18px;']，数组第二项可以写任意CSS样式

Boolean：使用title:false可以不显示标题栏

3、content-内容

类型：String、DOM、Array，默认：‘’

String：可以是任意文本或html

DOM：该元素要放在body最外层，否则可能被其它的相对元素影响。dom元素不会在原位置显示，会移动到弹出层中；退出弹出层后会在原位置显示，最好将DOM容器设置为display:none。实例如下

执行结果

Array：示例如下

如果是iframe层

1. layer.open({

2. type: 2,

3. content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

4. });

如果使用layer.open执行tips层：

1. layer.open({

2. type: 4,

3. content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM

4. });

4、skin-样式类名

类型：String，默认：‘’

5、area-宽高

类型：String、Array，默认‘auto’

默认是宽高都自适应的

只定义宽度，高度自适应         area: '500px'

定义宽高                                     area: ['500px', '300px']

6、offset-坐标

类型：String、Array，默认垂直水平居中

值	备注
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'	快捷设置右下角

7、icon-图标。信息框和加载层的私有参数

类型：Number，默认：-1（信息框）/0（加载层）

信息框默认不显示图标，想显示图标时，可以传入0~6；加载层可以传入0~2

代码：

1. layui.use('layer',function(){

2. layer=layui.layer;

3. layer.msg('有表情地提示',{

4. icon:1

5. });

6. })

当icon=0时：

当icon=1时：

当icon=2时

当icon=3时

当icon=4时

当icon=5时

当icon=6时

当icon=16时

 

8、btn-按钮

类型：String、Array，默认：‘确认’

信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。

定义一个按钮      btn: '我知道了'

定义多个按钮      btn: ['按钮1', '按钮2', '按钮3', …]

按钮1的回调是yes，从按钮2开始，回调为btn2:function(){}

1. layui.use('layer',function(){

2. var layer=layui.layer;

3. layer.open({

4. type:1,

5. content:'测试',

6. btn:['按钮一','按钮二','按钮三'],

7. yes:function(index,layero)

8. {

9. //index为当前层索引

10. //layero 为 弹出层对象

11. //在回调函数末尾添加 “return false”可以禁止点击该按钮关闭弹出层

12. return false;

13. },

14. btn2:function(index,layero){//按钮二回到

15. return false;

16. },

17. btn3:function(index,layero){//按钮三回调

18. return false;

19. },

20. cancel:function(){//右上角关闭毁回调

21. //return false;

22. }

23. })

24. })

9、btnAlign-按钮排列

类型：String，默认：r

值	备注
btnAlign: 'l'	按钮左对齐
btnAlign: 'c'	按钮居中对齐
btnAlign: 'r'	按钮右对齐。默认值，不用设置

10、closeBtn-关闭按钮

类型：String、Boolean，默认：1

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

closeBtn:0                                                                              closeBtn:1

    

closeBtn:2

11、shade-遮罩

类型：String、Array、Boolean，默认0.3，即透明度为0.3的黑色背景（#000）

自定义颜色       shade: [0.8, '#393D49']

不显示遮罩       shade: 0

12、shadeClose-是否点击遮罩关闭

类型：Boolean，默认false

如果shade存在，那么设置shadeClose:true可以使得点击遮罩关闭弹出层

13、time-自动关闭所需毫秒

类型：Number，默认：0

默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）

14、id-用于控制弹层唯一标识

类型：String，默认：空字符

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

15、anim-弹出动画

值	备注
anim:-1	不显示动画
anim: 0	平滑放大。默认
anim: 1	从上掉落
anim: 2	从最底部往上滑入
anim: 3	从左滑入
anim: 4	从左翻滚
anim: 5	渐显
anim: 6	抖动

16、isOutAnim-关闭动画

类型：Boolean，默认：true

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

17、fixed-固定

类型：Boolean，默认：true，即鼠标滚动时，层是否固定在可视区域。

如果不想，设置fixed: false即可

默认情况下，背景是利用鼠标滚动的

18、resize-是否允许拉伸

类型：Boolean，默认：true

默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效

19、resizing-监听窗口拉伸动作（配合上一属性使用）

1. resizing: function(layero){

2. //当前层的DOM对象

3. console.log(layero);

4. }

20、scrollbar-是否允许浏览器出现滚动条

类型：Boolean，默认：true，默认允许浏览器滚动

如果设定scrollbar: false，则屏蔽，即使浏览器存在滚动条，在弹出层出现后，也会消失

21、maxWidth-最大宽度

类型：Number，默认：360

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

22、maxHeight-最大高度

类型：Number，默认：无

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

23、move-触发拖动的元素

类型：String/DOM/Boolean，默认：'.layui-layer-title'，即默认是触发标题区域拖拽。

如果你想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。

还可以配置设定move: false来禁止拖拽

24、moveOut-是否允许拖拽到窗口外

类型：Boolean，默认：false

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

25、moveEnd-拖动完毕后的回调方法

类型：Function，默认：null

默认不会触发moveEnd，如果你需要，设定moveEnd: function(layero){}即可。其中layero为当前层的DOM对象

26、tips-tips方向和颜色

类型：Number/Array，默认：2

对应关系：1-上    2-右    3-下    4-左

tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']

27、tipsMore-是否允许多个tips

类型：Boolean，默认：false

设置tipsMore: true，意味着不会销毁之前的tips层。

28、回调方法

success：层弹出成功后的回调方法

yes：第8项提到的“按钮一”的回调方法，在回调方法中需要手动关闭层

1. layui.use('layer',function(){

2. var layer=layui.layer;

3. layer.open({

4. type:1,

5. content:'

   ',

6. btn:['按钮一','按钮二','按钮三'],

7. closeBtn:2,

8. move:'#aaa',

9. yes:function(index,layero)

10. {

11. layer.close(index);//需手动关闭 弹出层

12. },

13. btn2:function(index,layero){

14. //不需要手动关闭 弹出层

15. }

16. })

17. }）

cancel：右上角关闭按钮触发的回调

end：层销毁后触发的回调

full/min/restore-分别代表最大化、最小化、还原后触发的回调

内置方法

1、layer.config(options)-初始化全局配置

2、layer.ready(callback)-初始化就绪

主要是因为layer加载需要时间，也许很快，但过程仍然存在。如果你想在一开始就打开的话，可能会失出错，所以需要将代码放在layer.ready()中。

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

2. layer.ready(function(){

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

4. });

3、layer.open(options)-原始核心方法

4、layer.alert(content,opeions,yes)-普通信息框

1. //实例一

2. layer.alert('只想简单的提示');

3. //实例二

4. layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。

5. //实例三

6. layer.alert('有了回调', function(index){

7. //do something

8.  

9. layer.close(index);

10. });

实例一：                                                                                     实例二：

         

5、layer.confirm(content,options,yes,cancel)-询问框

1. layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){

2. //do something

3. layer.close(index);

4. });

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

1. layer.msg('同上', {

2. icon: 1,

3. time: 2000 //2秒关闭（如果不配置，默认是3秒）

4. }, function(){

5. //关闭后执行

6. }

7. );

7、layer.load(icon,options)-加载层

icon：Number类型，0~2，默认0,（可以不传）

该方法是“type：3”的深度定制

需要自己手动关闭，或者定义超时时间

1. //eg1

2. var index = layer.load();

3. //eg2

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

5. //eg3

6. var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒

7. //关闭

8. layer.close(index);

icon=0                                      icon=1                                       icon=2

          

 

8、layer.tips(content,follow,options)-tips层

该方法是type：4的深度定制

1. //实例一

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

3. //实例二

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

5. var that = this;

6. layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可

7. });

8. //实例三

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

10. tips: 1

11. });

9、layer.close(index)-关闭特顶层

1. layer.close(index); //关闭指定层

2.  

3. layer.close(layer.index); //关闭最新弹出的层，layer.index获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的

4.  

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

6. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

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

10、layer.cloasAll(type)-关闭所有层

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

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

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

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

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

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

11、layer.style(index,cssStyle)-重新定义层的样式

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

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

2. layer.style(index, {

3. width: '1000px',

4. top: '10px'

5. });

12、layer.title(title,index)-改变层的标题

layer.title('标题变了', index)

13、layer.getChildFrame(selector,index)-获取iframe页的DOM

selector是iframe页的选择器

1. layer.open({

2. type: 2,

3. content: 'test/iframe.html',

4. success: function(layero, index){

5. var body = layer.getChildFrame('body', index);

6. var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

7. console.log(body.html()) //得到iframe页的body内容

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

9. }

10. });

14、layer.getFrameIndex(windowName)-获取特定iframe层的索引

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

1. //假设这是iframe页

2. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

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

15、layer.iframeAuto(index)-指定iframe层自适应

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

16、layer.iframeSrc(index,url)-重置iframe的url

layer.iframeSrc(index, 'http://sentsin.com')

17、layer.setTop(layero)-置顶当前窗口

18、layer.prompt(options,yes)-输入层

options可传入基础参数，也可以传入prompt专用的属性。prompt专用属性有：

formType: 1,         //输入框类型，支持0（文本）默认1（密码）2（多行文本）

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

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

1. layer.prompt({

2. formType: 2,

3. value: '初始值',

4. title: '请输入值',

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

6. }, function(value, index, elem){

7. alert(value); //得到value

8. layer.close(index);

9. });

19、layer.tab(options)-tab层

1. layer.tab({

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

3. tab: [{

4. title: 'TAB1',

5. content: '内容1'

6. }, {

7. title: 'TAB2',

8. content: '内容2'

9. }, {

10. title: 'TAB3',

11. content: '内容3'

12. }]

13. });

20、layer.photos(options)-相册层

相册层，也可以称之为图片查看器。photos支持传入json和直接读取页面图片两种方式

1、如果是json传入：

1. $.getJSON('/jquery/layer/test/photos.json', function(json){

2. layer.photos({

3. photos: json

4. ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）

5. });

6. });

其中json格式如下：

1. {

2. "title": "", //相册标题

3. "id": 123, //相册id

4. "start": 0, //初始显示的图片序号，默认0

5. "data": [ //相册包含的图片，数组格式，可以有多个

6. {

7. "alt": "图片名",

8. "pid": 666, //图片id

9. "src": "", //原图地址

10. "thumb": "" //缩略图地址

11. }

12. ]

13. }

2、如果是直接读取页面图片，那么需要指向图片的父容器

html代码：

2. 

3. 

javascript代码：

1. //调用示例

2. layer.photos({

3. photos: '#layer-photos-demo',

4. anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）

5. });