弹窗拖拽组件开发应用
需要注意的问题包括:
1.this的指向到底是指向谁--弄清楚所指的对象
2.深入理解原型的概念及使用：
去改写对象下面公用的方法或者属性 , 让公用的方法或者属性在内存中存在一份 ( 提高性能)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>弹窗拖拽组件开发</title> 6 <style type="text/css"> 7 body,p,input{margin: 0;padding:0;} 8 form{text-align:center;} 9 form input{width:50px;font-size: 14px;height: 30px;z-index: 333;position: relative;} 10 .diag{background: #3D95D5;position: absolute;z-index: 2;} 11 .diag p{line-height: 20px;background: #f00;height:20px;} 12 .diag span{font-size: 12px;float: left;padding-left:20px; } 13 .diag .close{font-size: 20px;float: right;padding-right:10px; cursor: default;} 14 #mark{width:500px;height:500px;background: orange;position: absolute;left: 0;top:0;z-index: 1; 15 opacity: 0.3; filter:alpha(opacity=30);} 16 </style> 17 <script type="text/javascript"> 18 window.onload=function(){ 19 var aInput = document.getElementsByTagName("input"); 20 21 aInput[0].onclick=function(){ 22 var d1 = new Dialog(); 23 d1.init({ 24 title:"新闻", 25 iNow:1 26 }); 27 }; 28 aInput[1].onclick=function(){ 29 var d1 = new Dialog(); 30 d1.init({ 31 w:150, 32 h:150, 33 dir:"rightBottom", 34 title:"购物", 35 iNow:2 36 }); 37 }; 38 aInput[2].onclick=function(){ 39 var d1 = new Dialog(); 40 d1.init({ 41 dir:"rightTop", 42 mark:true, 43 title:"旅游", 44 iNow:3 45 }); 46 }; 47 aInput[3].onclick=function(){ 48 var d1 = new Dialog(); 49 d1.init({ 50 dir:"rightTop", 51 move:true, 52 title:"狂欢", 53 iNow:4 54 }); 55 }; 56 function Dialog(){ 57 this.disX=0; 58 this.disY=0; 59 this.oDiag=null; 60 this.settings={ 61 w:200, 62 h:200, 63 dir:"center", 64 title:"", 65 mark:false, 66 move:false 67 }; 68 }; 69 Dialog.prototype.json={}; 70 Dialog.prototype.init=function(opt){ 71 extend(this.settings,opt); 72 73 if(this.json[opt.iNow] == undefined){ 74 this.json[opt.iNow]=true; 75 } 76 if(this.json[opt.iNow]){ 77 this.Create(); 78 this.fnClose(); 79 80 if(this.settings.move){ 81 this.move(); 82 } 83 if(this.settings.mark){ 84 this.CreateMark(); 85 } 86 this.json[opt.iNow]=false; 87 } 88 }; 89 90 Dialog.prototype.Create=function(){ 91 this.oDiag = document.createElement("div"); 92 this.oDiag.className = "diag"; 93 this.oDiag.innerHTML = '<p><span>'+this.settings.title+'</span><span class="close">X</span></p>'; 94 document.body.appendChild(this.oDiag); 95 96 this.setData(); 97 }; 98 Dialog.prototype.move=function(){ 99 var This=this; 100 101 this.oDiag.onmousedown=function(ev){ 102 var ev = ev || window.event; 103 This.fnDown(ev); 104 This.oDiag.style.zIndex+=2; 105 106 document.onmousemove=function(ev){ 107 var ev = ev || window.event; 108 This.fnMove(ev); 109 } 110 document.onmouseup=function(){ 111 This.fnUp(); 112 } 113 } 114 }; 115 Dialog.prototype.fnDown=function(ev){ 116 this.disX=ev.clientX-this.oDiag.offsetLeft; 117 this.disY=ev.clientY-this.oDiag.offsetTop; 118 } 119 Dialog.prototype.fnMove=function(ev){ 120 this.oDiag.style.left=ev.clientX-this.disX+"px"; 121 this.oDiag.style.top=ev.clientY-this.disY+"px"; 122 } 123 Dialog.prototype.fnUp=function(){ 124 document.onmousemove=null; 125 document.onmouseup=null; 126 } 127 //创建标记 128 Dialog.prototype.CreateMark=function(){ 129 var oMark = document.createElement("div"); 130 oMark.id="mark"; 131 document.body.appendChild(oMark); 132 this.oMark=oMark; 133 oMark.style.width=viewWidth()+"px"; 134 oMark.style.height=viewHeight()+"px"; 135 } 136 //设置数据 137 Dialog.prototype.setData=function(){ 138 this.oDiag.style.width = this.settings.w+"px"; 139 this.oDiag.style.height = this.settings.h+"px"; 140 141 if(this.settings.dir=="center"){ 142 this.oDiag.style.left=(viewWidth()-this.oDiag.offsetWidth)/2+"px"; 143 this.oDiag.style.top=(viewHeight()-this.oDiag.offsetHeight)/2+"px"; 144 } 145 else if(this.settings.dir=="rightBottom"){ 146 this.oDiag.style.left=(viewWidth()-this.oDiag.offsetWidth)+"px"; 147 this.oDiag.style.top=(viewHeight()-this.oDiag.offsetHeight)+"px"; 148 } 149 else if(this.settings.dir=="rightTop"){ 150 this.oDiag.style.left=(viewWidth()-this.oDiag.offsetWidth)+"px"; 151 this.oDiag.style.top=0+"px"; 152 } 153 } 154 //关闭弹窗 155 Dialog.prototype.fnClose=function(){ 156 var This=this; 157 var oClose = this.oDiag.getElementsByTagName("span")[1]; 158 oClose.onclick=function(){ 159 document.body.removeChild(This.oDiag); 160 if(This.settings.mark){ 161 document.body.removeChild(This.oMark); 162 } 163 This.json[This.settings.iNow]=true; 164 }; 165 }; 166 //可视区的宽 167 function viewWidth(){ 168 return document.documentElement.clientWidth; 169 } 170 //可视区的高 171 function viewHeight(){ 172 return document.documentElement.clientHeight; 173 } 174 //继承 175 function extend(obj1,obj2){ 176 for(var attr in obj2){ 177 obj1[attr] = obj2[attr]; 178 } 179 } 180 } 181 182 </script> 183 </head> 184 <body> 185 <form> 186 <input type="button" value="新闻"> 187 <input type="button" value="购物"> 188 <input type="button" value="旅游"> 189 <input type="button" value="狂欢"> 190 </form> 191 192 193 194 </body> 195 </html>
