JavaScript面向对象的程序之弹框组件的开发Demo——xyp_hf
2017-08-22 12:18
465 查看
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、调用关闭弹窗
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、 12d2c 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>
相关文章推荐
- JavaScript面向对象的程序之拖拽组件的开发Demo——xyp_hf
- JavaScript面向对象的程序开发之拖拽Demo讲解——xyp_hf
- 10款优秀组件类小程序开发demo推荐
- Javascript面向对象及组件开发的详细介绍(一)
- Javascript面向对象及组件开发(二)面向对象的写法
- 微信小程序开发—(十四)表单组件1
- 微信小程序开发Demo
- JavaScript程序开发之JS代码放置的位置
- JavaScript程序开发之JS代码放置的位置
- 微信小程序开发demo-地图定位
- 开发一个完整的JavaScript组件
- JavaScript程序开发(七)—js语法之数据类型
- 结合JavaScript与ASP.NETWeb窗体进行程序开发
- 结合JavaScript与ASP.NET Web窗体进行程序开发
- C++面向对象的程序开发
- Javascript面向对象及组件详细介绍(五)原型链
- js面向对象---组件开发
- 开发 | 微信小程序audio音频播放组件+api_wx.createAudioContext
- ArcGIS API for JavaScript DEMO使用-ArcGIS Web 开发学习(二)
- 微信小程序开发日记之----swiper组件的坑