JavaScript面向对象的程序之弹框组件的开发Demo——xyp_hf
Posted mb60aa6722a0e94
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript面向对象的程序之弹框组件的开发Demo——xyp_hf相关的知识，希望对你有一定的参考价值。
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; 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</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; 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</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的主要内容，如果未能解决你的问题，请参考以下文章