大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > JavaScript技巧 > 基于layer封装的异步加载分部视图弹出层

基于layer封装的异步加载分部视图弹出层

关键词:弹出视图分部封装加载  阅读(616) 赞(11)

[摘要]本文是对基于layer封装的异步加载分部视图弹出层的讲解,对学习JavaScript编程技术有所帮助,与大家分享。

背景:之前一直用的artdialog,但是样式不是很好看,后来偶然看到layer,觉得不错,但是对于.net mvc来说,不能像artdialog一样弹出分部视图是很难受的。所以下面的方法就解决了。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title></title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="jquery-1.10.2.js"></script>
    <script src="layer/layer.js"></script>

    <script>
        layer.loading = function (url, opt) {
            var cid = layer.load(0, { shade: false }); //0代表加载的风格,支持0-2
            $.ajax({
                url: url,
                success: function (content) {                  
                        layer.close(cid);
                        opt.content = content;
                        layer.open(opt);

                }
            });
        }

        layer.alertP = function (content, options, yes) {
            var type = typeof options === 'function';
            if (type) yes = options;
            return layer.open($.extend({
                content: content,
                skin: 'layui-phone-alert',
                title: '',
                closeBtn: 0,
                yes: yes
            }, type ? {} : options));
        }

        layer.confirmP = function (content, options, yes, cancel) {
            var type = typeof options === 'function';
            if (type) {
                cancel = yes;
                yes = options;
            }
            return layer.confirm(content, $.extend({
                content: content,
                skin: 'layui-phone-confirm',
                title: '',
                closeBtn: 0,
                yes: yes,
                btn2: cancel
            }, type ? {} : options));

        }

    </script>

    <script>
        //d1跟d6类似,只不过多了个type,但是d6Alert时不会关闭当前弹出层,d1会,所以我一般用d6(记得加padding,因为d6默认没有padding),以P结尾的表示对手机端弹出的封装
        function d1() {
            layer.loading("part.html", {
                title: '异步加载!',
                maxWidth: 600,
                type: 1,
                success: function () {
                    alert(1);
                },
                btn: ['确定', '取消'],
                btn1: function (index, layero) {
                    //按钮【按钮一】的回调
                    layer.alert("弹窗内容,告知当前状态、")
                },
                btn2: function (index, layero) {
                    //按钮【按钮二】的回调

                    //return false 开启该代码可禁止点击该按钮关闭
                }


            });

        }

        function d6() {
            layer.loading("part.html", {
                title: '异步加载!',
                maxWidth: 600,
                btn: ['确定', '取消'],
                btn1: function (index, layero) {
                    //按钮【按钮一】的回调
                    layer.alert("弹窗内容,告知当前状态、")
                },
                btn2: function (index, layero) {
                    //按钮【按钮二】的回调

                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        }

        function d4() {

            layer.confirm('确定要删除吗?', { icon: 3 }, function () {

                layer.msg('删除成功', { time: 200000 });
            });

        }

        function d2() {
            layer.alert("弹窗内容,告知当前状态、")
        }

        function d3() {

            layer.alertP("layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案。");

        }

        function d5() {

            layer.confirmP('确定要删除吗?', function () {

                layer.msg('删除成功', { icon: 1 });
            });


        }

    </script>

</head>
<body>
    <button type="button" onclick="d2()">普通对话框</button>
    <button type="button" onclick="d4()">提示是否</button>
    <button type="button" onclick="d3()">手机对话框</button>
    <button type="button" onclick="d5()">手机对话框是否</button>


    <button type="button" onclick="d1()">异步提示框1</button>

    <button type="button" onclick="d6()">异步提示框2</button>
</body>
</html>


相关评论