美文网首页
layer 初始化

layer 初始化

作者: Top_Chenxi | 来源:发表于2016-09-27 16:01 被阅读2482次
    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 初始化

          本文链接:https://www.haomeiwen.com/subject/wpncyttx.html