JavaScript面向对象的程序之弹框组件的开发Demo——xyp_hf

最新推荐文章于 2023-08-10 16:20:37 发布

xyphf_和派孔明

最新推荐文章于 2023-08-10 16:20:37 发布

阅读量969

点赞数

分类专栏： JavaScript面向对象文章标签：面向对象

本文链接：https://blog.csdn.net/xyphf/article/details/77478569

版权

JavaScript面向对象专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1、首先我们可以写几个input按钮，这个按钮可以用来点击跳出弹窗；
2、在body里面写一个弹框的布局，在给这个弹框写点样式。

3、开始编写弹窗组件；
4、获取几个弹窗的按钮，给几个Input按钮添加一个点击事件；
5、要求点击按钮时创建一个弹窗对象并且让它初始化；
6、写弹框的构造函数Dialog()
7、写初始化函数init()
8、init中传入一个json，这个json就是配置参数，有配置走配置，没配置走默认
9、给初始化init传入一个json的形参opt；
10、在Dialog()构造函数里面写上默认参数json；
11、编写extend()函数;
12、调用extend()函数，将this.settings 和opt作为参数传入；

13、到目前为止组件框架基本上已经搭好了

框架搭好之后，就可以按我们自己的想法来丰富它
14、第一个弹框，我们不走配置，所有的配置都都默认
15、我们给弹框一个默认的大小，宽300px;高300px;
16、设置弹框的默认方向

17、创建弹框
18、在初始化之后调用创建的弹框
19、写一个setData()方法设置弹框数据
20、在创建弹窗的create()方法内调用setData()设置参数的方法
21、添加属性
22、将变量设置为属性
23、设置弹框的属性参数
24、设置方向
25、封装获取可视区的宽高

26、创建第二个弹框，作为右下角的公告
27、设置标题
28、设置title
29、编写关闭弹窗方法
30、调用关闭弹窗

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>组件开发弹框</title>
    <style>
        *{ margin:0; padding:0;}
        .login{ background:white; border:1px #000 solid; position:absolute; left:0; top:0;}
        .title{ height:30px; background:gray; color:white;}
        .title .close{ float:right;}
    </style>
    <script>
        // 3、
window.onload = function() {
    // 4、
    var aInput = document.getElementsByTagName('input');
    aInput[0].onclick = function() {
        // 5、
        var dl = new Dialog();
        // 8、init中传入一个json
        dl.init({ //配置参数
            title : '登录'
        });
    };

    // 26、创建第二个弹框
    aInput[1].onclick = function() {
        var dl = new Dialog();
        dl.init({ //配置参数
            w : 100,
            h : 400,
            dir : 'right',
            title : '公告'
        });
    };
};
// 6、
function Dialog() {
    //21、添加属性
    this.oLogin = null;
    // 10、
    this.settings = { //默认参数
        //15 、设置弹框的默认宽高
        w : 300,
        h : 300,
        // 16、设置弹框的默认方向
        dir : 'center',
        // 27、设置标题
        title : ''
    };
}
// 7、 初始化                  9、传入init的形参 设为ipt
Dialog.prototype.init = function( opt ) {
    // 12、调用拷贝继承
    extend( this.settings , opt );
    // 18、在初始化之后调用创建的弹框
    this.create();
};

// 17、 创建弹框
Dialog.prototype.create = function() {
    // 22、将变量设置为属性
    this.oLogin = document.createElement('div');
    this.oLogin.className = 'login';
    // 28、设置title
    this.oLogin.innerHTML = '<div class="title"><span>'+ this.settings.title +'</span><span class="close">X</span></div><div class="content"></div>';

    document.body.appendChild( this.oLogin );
    // 20、调用设置参数
    this.setData();
};

// 19、设置弹框参数
Dialog.prototype.setData = function() {
    // 23、设置弹框的属性参数
    this.oLogin.style.width = this.settings.w + 'px';
    this.oLogin.style.height = this.settings.h + 'px';

    // 24、设置方向
    if( this.settings.dir == 'center' ){
        // 居中
        this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth)/2 + 'px';
        this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight)/2 + 'px';
    }else if( this.settings.dir == 'right' ){
        // 右下角
        this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth)+ 'px';
        this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight) + 'px';
    }
};

// 11、 拷贝继承函数
function extend(obj1,obj2){
    for(var attr in obj2){
        obj1[attr] = obj2[attr];
    }
}
//25、封装函数获取可视区的宽高
function viewWidth() {
    return document.documentElement.clientWidth;
}
function viewHeight() {
    return document.documentElement.clientHeight;
}
    </script>
</head>
<body>
<!-- 1、-->
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">

<!-- 2、 -->
<div class="login">
<!--    <div class="title">
        <span>标题</span><span class="close">X</span>
    </div>
    <div class="content"></div>-->
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>组件开发弹框</title>
    <style>
        *{ margin:0; padding:0;}
        .login{ background:white; border:1px #000 solid; position:absolute; left:0; top:0;z-index: 2;}
        .title{ height:30px; background:gray; color:white;}
        .title .close{ float:right;}
        #mark {background: black;fitler:alpha(opacity=50);opacity: 0.5;
        position: absolute;left: 0;top: 0;z-index: 1; }
    </style>
    <script>
        // 3、
        window.onload = function() {
            // 4、
            var aInput = document.getElementsByTagName('input');
            aInput[0].onclick = function() {
                // 5、
                var dl = new Dialog();
                // 8、init中传入一个json
                dl.init({ //配置参数
                    iNow  : 0, //标识
                    title : '登录'
                });
            };

            // 26、创建第二个弹框
            aInput[1].onclick = function() {
                var dl = new Dialog();
                dl.init({ //配置参数
                    iNow : 1,
                    w : 100,
                    h : 400,
                    dir : 'right',
                    title : '公告'
                });
            };

            aInput[2].onclick = function() {
                var dl = new Dialog();
                dl.init({ //配置参数
                    iNow : 2,
                    // 遮罩
                    mark : true
                });
            };

        };
        // 6、
        function Dialog() {
            //21、添加属性
            this.oLogin = null;
            // 10、
            this.settings = { //默认参数
                //15 、设置弹框的默认宽高
                w : 300,
                h : 300,
                // 16、设置弹框的默认方向
                dir : 'center',
                // 27、设置标题
                title : '',
                mark : false
            };
        }

        Dialog.prototype.json = { };

        // 7、 初始化                  9、传入init的形参 设为ipt
        Dialog.prototype.init = function( opt ) {
            // 12、调用拷贝继承
            extend(this.settings, opt);

            if (this.json[opt.iNow] == undefined) {
                this.json[opt.iNow] = true;
            }

            if (this.json[opt.iNow]) {
                // 18、在初始化之后调用创建的弹框
                this.create();
                // 30、调用关闭弹窗
                this.fnClose();

                // 调用遮罩方法
                if (this.settings.mark) {
                    this.createMark();
                }
                this.json[opt.iNow] = false;
            }

        };

        // 17、 创建弹框
        Dialog.prototype.create = function() {
            // 22、将变量设置为属性
            this.oLogin = document.createElement('div');
            this.oLogin.className = 'login';
            // 28、设置title
            this.oLogin.innerHTML = '<div class="title"><span>'+ this.settings.title +'</span><span class="close">X</span></div><div class="content"></div>';

            document.body.appendChild( this.oLogin );
            // 20、调用设置参数
            this.setData();
        };

        // 19、设置弹框参数
        Dialog.prototype.setData = function() {
            // 23、设置弹框的属性参数
            this.oLogin.style.width = this.settings.w + 'px';
            this.oLogin.style.height = this.settings.h + 'px';

            // 24、设置方向
            if( this.settings.dir == 'center' ){
                // 居中
                this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth)/2 + 'px';
                this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight)/2 + 'px';
            }else if( this.settings.dir == 'right' ){
                // 右下角
                this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth)+ 'px';
                this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight) + 'px';
            }
        };

        // 29、编写关闭弹窗方法
        Dialog.prototype.fnClose = function() {
            var oClose = this.oLogin.getElementsByTagName('span')[1];
            var This = this;
            oClose.onclick = function() {
                document.body.removeChild(This.oLogin);
                // 关闭弹窗的时候 如果有遮罩层把遮罩层也关了
                if(This.settings.mark){
                    document.body.removeChild( This.oMark );
                }
                This.json[This.settings.iNow] = true;
            };
        };

        // 遮罩方法
        Dialog.prototype.createMark = function() {
            var oMark = document.createElement('div');
            oMark.id = 'mark';

            document.body.appendChild( oMark );

            this.oMark = oMark;

            oMark.style.width = viewWidth() + 'px';
            oMark.style.height = viewHeight() + 'px';
        };

        // 11、 拷贝继承函数
        function extend(obj1,obj2){
            for(var attr in obj2){
                obj1[attr] = obj2[attr];
            }
        }
        //25、封装函数获取可视区的宽高
        function viewWidth() {
            return document.documentElement.clientWidth;
        }
        function viewHeight() {
            return document.documentElement.clientHeight;
        }
    </script>
</head>
<body>
<!-- 1、-->
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">

<!-- 2、 -->
<div class="login">
    <!--    <div class="title">
            <span>标题</span><span class="close">X</span>
        </div>
        <div class="content"></div>-->
    <!-- 遮罩层 -->
    <!--<div id="mark"></div>-->
</div>
</body>
</html>