layui插件layer使用记录

layer简介

[layui](http://www.layui.com)是一款类似bootstrap的前端框架,作者贤心,人称心姐;
[layer](layer.layui.com)是layui的一个独立插件,可以非常简单的完成漂亮简单的弹出框;

layer的使用方法

layer.open({

});

layer.open()是layer的最核心的方法,其他还有layer.alert();layer.confirm()等其他弹出框,具体可查看其官方文档http://www.layui.com/doc/modules/layer.htm
我们下面详细介绍一下layer.open()中的几个复杂,有坑的参数;

layer支持的弹出框类型–参数type

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

type : 0 (信息框,默认)

type : 0是默认的,常用的比较少,不过可以实现比较常见的功能,比如美化js的alert,自动关闭的提示框等等,
功能比较单一,一般只支持文本

type : 1(信息框)

content属性是个html或者是jquery dom,可以自定义

type : 2 (iframe层)

        layer.open({
                type : 2,
                title : '新增售后信息',
                //iframe的url,
                content : url,
                //大小 [横向, 竖向] 可用px以及百分比
                area : ['30%', '430px'],
                //好像没搞定,即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0
                shade : [0.8, '#393D49'],
                //点击关闭 遮罩处关闭弹窗 前提是shade
                shadeClose : false,
//              /可通过配置1和2来展示，如果不显示，则closeBtn: 0,默认1
                closeBtn : 1,
                //弹出层被成功创建的回调
                success : function(layero, index){
                    console.log("success-------")
                    console.log(index)
                    console.log(layero);
                },
                //
                                yes : function(layero, index){
                    console.log("yes-------")
                    console.log(index)
                    console.log(layero);
                },
                //右上角关闭按钮触发的回调,如果不想关闭，return false即可
                cancel : function(layero, index){
                    console.log("cancel-------")
                    console.log(index);
                    console.log(layero);
                },
                //可以在layer footer上显示几个按钮
                btn : ["保存","关闭","确认","btn4"],
                //btn1的回调
                //1.同时存在btn1和yes 先执行btn1,后执行了yes 并且窗口不关闭(没有手动colse的话)
                //2.btn1和yes都不存在  窗口会被关闭
                //3.but1在,yes不存在   but1执行 窗口不关闭(没有手动colse的话)
                //3.but1不在,yes存在  yes执行 窗口不关闭(没有手动colse的话)
                btn1 : function(index, layero){
                    console.log("btn1 的回调");
                    console.log(index);
                    console.log(layero);
                    $layer.close(index); //再执行关闭 
                },
                //btn2的回调会关闭弹层,并且没有触发其他事件??????
                btn2 : function(index, layero){
                    console.log("btn2 的回调");
                    console.log(index);
                    console.log(layero);
                },
                //btn3的回调会关闭弹层,并且没有触发其他事件??????
                btn3 : function(index, layero){
                    console.log("btn3 的回调");
                    console.log(index);
                    console.log(layero);
                },
                //同上
                btn4 : function(index, layero){
                    console.log("btn4 的回调");
                    console.log(index);
                    console.log(layero);
                },
            });

其他的多中弹窗类型可以查看layer的文档,里面介绍的都比较详细;
最后注意一点,如果弹窗中有按钮,请尽量使用{btn : [‘btn1’],[btn2]}的实现,不要自己在页面中写button,如果必需在页面中写button的话,请使用a标签,使用button标签会出现奇奇怪怪的问题

<a href="javascript:void(0);" class="layui-btn layui-bg-blue" @click="saveOrUpdate()">保存</a>

iframe通信

父子页面通信

通信我目前只找到了一个方法,就是父页面可以获取或者设置子页面的 dom元素
比如1:父页面向子页面传值

//父页面的js
//通过 layer.getChildFrame(selector, index) - 获取iframe页的DOM
//selector即iframe页的选择器
//获取子页面的 #id 设置值为id
var id = "childId";
layer.getChildFrame('#id', index).val(id);

2:子页面向父页面传值的话也需要在父页面的js中写

var childId = layer.getChildFrame('#id', index).val();

文档中介绍较少的几个操作

1.窗口大小类方法
laery.full(),layer.min(),layer.restore()
可以传入 index（就是 var index = layer.open()的index）来操作layer的最大最小化等，
可以在open中,设置窗口大小改变的监听

layer.open({
    full:function(layero){},
    min:function(layero){},
    restore:function(layero){}},
    resizing: function(layero){})

总结

layui整体还是一个很不错的ui框架,其中layer更是一个很棒的弹出层插件,使用简单,功能丰富,页面也比较漂亮;作为一个国产的前端框架是很棒的了;