您的位置：首页 > 其它

弹窗拖拽组件开发应用

2016-05-08 13:29 316 查看

需要注意的问题包括:

1.this的指向到底是指向谁--弄清楚所指的对象

2.深入理解原型的概念及使用：

　　去改写对象下面公用的方法或者属性 , 让公用的方法或者属性在内存中存在一份 ( 提高性能)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹窗拖拽组件开发</title>
<style type="text/css">
body,p,input{margin: 0;padding:0;}
form{text-align:center;}
form input{width:50px;font-size: 14px;height: 30px;z-index: 333;position: relative;}
.diag{background: #3D95D5;position: absolute;z-index: 2;}
.diag p{line-height: 20px;background: #f00;height:20px;}
.diag span{font-size: 12px;float: left;padding-left:20px; }
.diag .close{font-size: 20px;float: right;padding-right:10px; cursor: default;}
#mark{width:500px;height:500px;background: orange;position: absolute;left: 0;top:0;z-index: 1;
opacity: 0.3; filter:alpha(opacity=30);}
</style>
<script type="text/javascript">
window.onload=function(){
var aInput = document.getElementsByTagName("input");

aInput[0].onclick=function(){
var d1 = new Dialog();
d1.init({
title:"新闻",
iNow:1
});
};
aInput[1].onclick=function(){
var d1 = new Dialog();
d1.init({
w:150,
h:150,
dir:"rightBottom",
title:"购物",
iNow:2
});
};
aInput[2].onclick=function(){
var d1 = new Dialog();
d1.init({
dir:"rightTop",
mark:true,
title:"旅游",
iNow:3
});
};
aInput[3].onclick=function(){
var d1 = new Dialog();
d1.init({
dir:"rightTop",
move:true,
title:"狂欢",
iNow:4
});
};
function Dialog(){
this.disX=0;
this.disY=0;
this.oDiag=null;
this.settings={
w:200,
h:200,
dir:"center",
title:"",
mark:false,
move:false
};
};
Dialog.prototype.json={};
Dialog.prototype.init=function(opt){
extend(this.settings,opt);

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

if(this.settings.move){
this.move();
}
if(this.settings.mark){
this.CreateMark();
}
this.json[opt.iNow]=false;
}
};

Dialog.prototype.Create=function(){
this.oDiag = document.createElement("div");
this.oDiag.className = "diag";
this.oDiag.innerHTML = '<p><span>'+this.settings.title+'</span><span class="close">X</span></p>';
document.body.appendChild(this.oDiag);

this.setData();
};
Dialog.prototype.move=function(){
var This=this;

this.oDiag.onmousedown=function(ev){
var ev = ev || window.event;
This.fnDown(ev);
This.oDiag.style.zIndex+=2;

document.onmousemove=function(ev){
var ev = ev || window.event;
This.fnMove(ev);
}
document.onmouseup=function(){
This.fnUp();
}
}
};
Dialog.prototype.fnDown=function(ev){
this.disX=ev.clientX-this.oDiag.offsetLeft;
this.disY=ev.clientY-this.oDiag.offsetTop;
}
Dialog.prototype.fnMove=function(ev){
this.oDiag.style.left=ev.clientX-this.disX+"px";
this.oDiag.style.top=ev.clientY-this.disY+"px";
}
Dialog.prototype.fnUp=function(){
document.onmousemove=null;
document.onmouseup=null;
}
//创建标记
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";
}
//设置数据
Dialog.prototype.setData=function(){
this.oDiag.style.width = this.settings.w+"px";
this.oDiag.style.height = this.settings.h+"px";

if(this.settings.dir=="center"){
this.oDiag.style.left=(viewWidth()-this.oDiag.offsetWidth)/2+"px";
this.oDiag.style.top=(viewHeight()-this.oDiag.offsetHeight)/2+"px";
}
else if(this.settings.dir=="rightBottom"){
this.oDiag.style.left=(viewWidth()-this.oDiag.offsetWidth)+"px";
this.oDiag.style.top=(viewHeight()-this.oDiag.offsetHeight)+"px";
}
else if(this.settings.dir=="rightTop"){
this.oDiag.style.left=(viewWidth()-this.oDiag.offsetWidth)+"px";
this.oDiag.style.top=0+"px";
}
}
//关闭弹窗
Dialog.prototype.fnClose=function(){
var This=this;
var oClose = this.oDiag.getElementsByTagName("span")[1];
oClose.onclick=function(){
document.body.removeChild(This.oDiag);
if(This.settings.mark){
document.body.removeChild(This.oMark);
}
This.json[This.settings.iNow]=true;
};
};
//可视区的宽
function viewWidth(){
return document.documentElement.clientWidth;
}
//可视区的高
function viewHeight(){
return document.documentElement.clientHeight;
}
//继承
function extend(obj1,obj2){
for(var attr in obj2){
obj1[attr] = obj2[attr];
}
}
}

</script>
</head>
<body>
<form>
<input type="button" value="新闻">
<input type="button" value="购物">
<input type="button" value="旅游">
<input type="button" value="狂欢">
</form>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航