layer 初始化

require(['jquery', 'layer'], function($, layer) {

    var options = {
        /*
            基本层类型
            0 (信息框,默认)
            1 (页面层)
            2 (iframe层)
            3 (加载层)
            4 (tips层)
         */
        type: 0,
        /*
            标题
            String (title :'我是标题')
            Array (title: ['文本', 'font-size:18px;'])
            Boolean (title: false)
         */
        title: '我是标题',
        /*        
            内容
            String (content: '我是内容')
            DOM (content: $('#id'))
            Array (content: ['内容', '#id'] 数组第二项即吸附元素选择器或者DOM)
         */
        content: '我是内容',
        /*
            样式类名
            String
         */
        skin: 'skin-css',
        /*
            宽高
            String (area: '500px')
            Array (area: ['500px', '300px'])
         */
        area: 'auto',
        /*
            坐标
            String (offset: '100px')
            Array (offset: ['100px', '200px'])
         */
        offset: 'auto',
        /*
            图标
            Number 信息框(0-6) 加载层(0-2)
         */
        icon: 1,
        /*
            按钮  
            String (btn: '我知道了')
            Array (btn: ['yes', 'no'],btn: ['按钮1', '按钮2', '按钮3', …])
         */
        btn: ['yes', 'no'],
        /*
            关闭按钮
            String (0,1,2)
            Boolean (true,false)
         */
        closeBtn: 1,
        /*
            遮罩
            String (shade: 0) 取消遮罩
            Array (shade: [0.8, '#393D49'])
            Boolean
         */
        shade: 0.2,
        /*
            是否点击遮罩关闭
            Boolean (true\false)
         */
        shadeClose: true,
        /*
            自动关闭所需毫秒
            Number 0 ( 0 默认不会自动关闭)
         */
        time: 0,
        /*
            用于控制弹层唯一标识
            String 置该值后,只允许同时弹出一个
         */
        id: 'layer_id',
        /*
            动画
            Number (0-6) 默认:0
         */
        shift: 1,
        /*
            最大最小化
            Boolean (false) 参数值对type:1和type:2有效
         */
        maxmin: false,
        /*
            固定
            Boolean (true)
         */
        fix: true,
        /*
            最大宽度
            当area: 'auto'时,maxWidth的设定才有效。
         */
        maxWidth: 360,
        /*
            层叠顺序
         */
        zIndex: 19891014,
        /*
            触发拖动的元素
         */
        move: '.layui-layer-title',
        /*       
            拖拽风格
            Number:0,1
         */
        moveType: 1,
        /*
            是否允许拖拽到窗口外
            Boolean false
         */
        moveOut: false,
        /*
            拖动完毕后的回调方法
         */
        moveEnd: function() {
            console.log('moveEnd');
        },
        /*
            tips方向和颜色
            tips层的私有参数
            Number (tips:2) 上,右,下,左 对应 1-4
            Array (tips: [1, '#c00'])
         */
        tips: 2,
        /*
            是否允许多个tips
            Boolean false
         */
        tipsMore: false,
        // 层弹出后的成功回调方法
        success: function(layero, index) {
            console.log(layero, index);
        },
        // 确定按钮回调方法
        yes: function(index, layero) {
            console.log(index, layero);
        },
        // 取消和关闭按钮触发的回调
        cancel: function(index) {
            console.log(index)
        },
        // 层销毁后触发的回调
        end: function() {

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

    $('#btn').click(function() {
        // 原始核心方法 layer.open(options)
        layer.open(options);

        // 普通信息框   layer.alert(content, options, yes) 
        layer.alert('我是内容', options);

        // 询问框       layer.confirm(content, options, yes, cancel)
        layer.confirm('我是内容', options, yes, cancel);

        // 提示框       layer.msg(content, options, end) 
        layer.msg('我是内容', { time: 2000 }) ;

        // 加载层       layer.load(icon, options)
        layer.load(2, { time: 2000 });

        // tips层 layer.tips(content, follow, options)
        var _this = this;
        layer.tips('我是内容', _this, { tips: 2 });

        // 关闭特定层   layer.close(index)

        // 关闭所有层   layer.closeAll(type) type(dialog , page , iframe , loading , tips )

        // 改变层的标题 layer.title(title, index)

        // 置顶当前窗口 layer.setTop(layero)

        // 手工执行最大小化 layer.full()、layer.min()、layer.restore()
    })

})

参考文献

你可能感兴趣的:(layer 初始化)