关于DOM清空

Question

弹框部分js与html,与上部分连接起来可以看到效果var InfoAlert = Class.create(); InfoAlert.prototype = {
initialize : function(title, content, options){
this.setOptions();
this.title = title;
this.isCenter = !!this.option.center;
this.isDrag = !!this.option.drag;
this.showDiv();
}, showDiv : function(){
// 背景透明div生成
this.oContent = document.createElement("div");
this.oContent.id = "oContent"
with(this.oContent.style){left = "0px";top = "0px";if(isIE){filter = "Alpha(opacity = 80)" }else {opacity = 0.8} ;width = "100%";height = "100%";position = "absolute";zIndex = "1000";backgroundColor = "#FFFFFF"}
document.body.appendChild(this.oContent); // 拖拽div生成
this.oDrag = document.createElement("div");
with(this.oDrag.style){
width = "350px"; height = "280px"; zIndex = "1001"; position = "absolute"; }
document.body.appendChild(this.oDrag);
if(!!this.isCenter){
with(this.oDrag.style){
left = parseInt(this.oContent.offsetWidth) / 2 - (parseInt(this.oDrag.offsetWidth) / 2);
top = parseInt(this.oContent.offsetHeight) / 2 - (parseInt(this.oDrag.offsetHeight) / 2);
}
} // 内容div生成
this.oTitle = document.createElement("div");
this.oTitle.style.width = this.oDrag.style.width;
this.oTitle.style.height = "30px";
this.oTitle.style.border = "0px solid red";
this.oTitle.style.padding = "5px !important";
this.oTitle.style.backgroundColor = "#C0C0C0";
this.oDrag.appendChild(this.oTitle)
this.strHtml ="<table id='otbl' style='width:350px;position:absolute;height:280px;"
this.strHtml+="border:1px solid black;font-size:9pt;border-collapse:collapse'>"
this.strHtml+="<tr style='height:25px;background-color:#C0C0C0'>"
this.strHtml+="<td style='width:88%'>"+this.title+"</td>"
this.strHtml+="<td id='tcancel'>[取消]</td>"
this.strHtml+="</tr>"
this.strHtml+="<tr>"
this.strHtml+="<td colspan='2'>小时"
this.strHtml+="<div style='border-top:1px solid red;border-bottom:1px solid red;height:140px;padding:10px;text-align:center'>"
            this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<br><input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<br>"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<br><input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<br>"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<br><input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<br>"
this.strHtml+="</div>"
this.strHtml+="<span style='height:20px;width:350px'>"
this.strHtml+="请选择所需小时"
this.strHtml+="</span><br>"
this.strHtml+="分钟:"
this.strHtml+="<div style='border-top:1px solid red;border-bottom:1px solid red;height:20px;text-align:center'>"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时"
this.strHtml+="</div>"
this.strHtml+="</td>"
this.strHtml+="</tr>"
this.strHtml+="<tr style='height:20px;background-color:#C0C0C0'>"
this.strHtml+="<td colspan='2' style='text-align:center'><input type='button' value = ' 确认 '></td>"
this.strHtml+="</tr>"
this.strHtml+="</table>";
this.oDrag.innerHTML = this.strHtml;
$('tcancel').onmouseover = function(){
this.style.cursor = "pointer";
}
$('tcancel').onclick = function(){
new InfoAlert('[参数设置]', 'content', {drag:true,center:true}).ClearAll();
} new Drag('oContent', 'otbl' ,{limit : true});
}, setOptions : function(options){
this.option = {
drag : true,
center : true
} Object.extend(this.option, options || {});
}, ClearAll : function(){
/*这里需要将dom清空*/
//this.oDrag.innerHTML = "";
//alert(this.oDrag.innerHTML)

}
}
  //-->
  </script>
 </head> <body>
  
 <input type="button" value=" 提示信息 " onclick="new InfoAlert('[参数设置]', 'content', {drag:true,center:true})"> </body>

Answer 1

晕 自己解决了  当散分贴了 $('tcancel').onclick = function(){
oThis.ClearAll();
}
写错了 晕由于新手 代码写的有待商榷 大家给提提意见 散分

Answer 2

======================散分===================================
简单的div对话框模拟
缺点：代码的复用性很差
      不知道Dom操作是否造成内存泄漏由于新手，希望大家能多吃点下，尤其是代码的重用代码如下，分成两部分
js1 var $ = function(id){
return "string" == typeof id ? document.getElementById(id) : id;
} var isIE = (document.all) ? true : false; function addEventHandler(oTarget, sEventType, fnHandler){
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType, fnHandler, false);
}else if(oTarget.attachEvent){
oTarget.attachEvent("on" + sEventType, fnHandler);
}else{
oTarget["on" + sEventType] = fnHandler;
}
} function removeEventHandler(oTarget, sEventType, fnHandler){
if(oTarget.removeEventListener){
oTarget.removeEventListener(sEventType, fnHandler, false);
}else if(oTarget.detachEvent){
oTarget.detachEvent("on" + sEventType, fnHandler);
}else{
oTarget["on" + sEventType] = null;
}
} Object.extend = function(distination, source){
for(var property in source){
distination[property] = source[property];
}
return distination;
} var Class = {
create : function(){
return function(){
this.initialize.apply(this, arguments);
}
}
} var Drag = Class.create();
Drag.prototype = {
initialize : function(idContent, idDrag, options){
var oThis = this;
this._fM = function(e){oThis.mouseMove(e || window.event)};
this._fU = function(e){oThis.mouseUp(e || window.event)};
this._x = 0;this.y = 0;

this.oDrag = $(idDrag);this.oContent = $(idContent);
this.setOptions(options);
addEventHandler(this.oDrag.rows[0], "mouseover", function(){oThis.oDrag.rows[0].style.cursor = "move"})
addEventHandler(this.oDrag.rows[0], "mousedown", function(e){oThis.mouseDown(e || window.event)})
}, setOptions : function(options){
this.options = {
Limit : false //true: 限制范围 ，false: 不限制范围
};
Object.extend(this.options, options || {});
}, mouseDown : function(oEvent){
this._x = oEvent.clientX - this.oDrag.offsetLeft;
this._y = oEvent.clientY - this.oDrag.offsetTop; addEventHandler(document, "mousemove",this._fM);
addEventHandler(document, "mouseup",this._fU);
}, mouseMove : function(oEvent){
if(isIE){
addEventHandler(this.oDrag, "losecapture", this._fU);
this.oDrag.setCapture();
}else{
window.getSelection && window.getSelection().removeAllRanges();
}
var iLeft = oEvent.clientX - this._x;
var iTop = oEvent.clientY - this._y;
// 限制范围时候的坐标判断
if(this.options.Limit){
var iMaxLeft = iMaxTop = 0;
var iMaxRight = this.oContent.clientWidth;
var iMaxBottom = this.oContent.clientHeight;
var bLock = false; // 获取超出长度
var iRight = this.oDrag.offsetWidth + iLeft - iMaxRight;
var iBottom = this.oDrag.offsetHeight + iTop - iMaxBottom; if(iRight > 0){iLeft -= iRight;}
if(iBottom > 0){iTop -= iBottom;}
if(iMaxLeft > iLeft) {iLeft = iMaxLeft;}
if(iMaxTop > iTop){iTop = iMaxTop;}
}
this.oDrag.style.left = iLeft;
this.oDrag.style.top = iTop; }, mouseUp : function(oEvent){
if(isIE){
removeEventHandler(this.oDrag.rows[0], "losecapture", this._fU);
this.oDrag.releaseCapture();
}
removeEventHandler(document, "mousemove",this._fM );
removeEventHandler(document, "mouseup",this._fU );
}
}

Answer 3

js2
var InfoAlert = Class.create(); InfoAlert.prototype = {
initialize : function(title, content, options, colorArr){
var oThis = this;
this.setOptions(options);
this.title = title;
this.titleColor = (colorArr[0] == "") ? this.option.titleColor : colorArr[0];
this.footeColor = (colorArr[1] == "") ? this.option.footColor : colorArr[1];
this.isCenter = !!this.option.center;
this.isDrag = !!this.option.Drag;
this.showDiv();
}, showDiv : function(){
var oThis = this;
// 背景透明div生成
this.oContent = document.createElement("div");
this.oContent.id = "oContent"
with(this.oContent.style){left = "0px";top = "0px";if(isIE){filter = "Alpha(opacity = 80)" }else {opacity = 0.8} ;width = "100%";height = "100%";position = "absolute";zIndex = "1000";backgroundColor = "#FFFFFF"}
document.body.appendChild(this.oContent); // 拖拽div生成
this.oDrag = document.createElement("div");
with(this.oDrag.style){
width = "350px"; height = "280px"; zIndex = "1001"; position = "absolute"; }
document.body.appendChild(this.oDrag);
if(!!this.isCenter){
with(this.oDrag.style){
left = parseInt(this.oContent.offsetWidth) / 2 - (parseInt(this.oDrag.offsetWidth) / 2);
top = parseInt(this.oContent.offsetHeight) / 2 - (parseInt(this.oDrag.offsetHeight) / 2);
}
} // 内容div生成
this.oTitle = document.createElement("div");
this.oTitle.style.width = this.oDrag.style.width;
this.oTitle.style.height = "30px";
this.oTitle.style.border = "0px solid red";
this.oTitle.style.padding = "5px !important";
this.oTitle.style.backgroundColor = "#C0C0C0";
this.oDrag.appendChild(this.oTitle)
this.strHtml ="<table id='otbl' style='width:350px;position:absolute;height:280px;"
this.strHtml+="border:1px solid black;font-size:9pt;border-collapse:collapse'>"
this.strHtml+="<tr style='height:25px;background-color:"+this.titleColor+"'>"
this.strHtml+="<td style='width:88%'>"+this.title+"</td>"
this.strHtml+="<td id='tcancel'>[取消]</td>"
this.strHtml+="</tr>"
this.strHtml+="<tr>"
this.strHtml+="<td colspan='2'>小时"
this.strHtml+="<div style='border-top:1px solid red;border-bottom:1px solid red;height:140px;padding:10px;text-align:center'>"
            this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<br><input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<br>"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<br><input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<br>"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<br><input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<br>"
this.strHtml+="</div>"
this.strHtml+="<span style='height:20px;width:350px'>"
this.strHtml+="请选择所需小时"
this.strHtml+="</span><br>"
this.strHtml+="分钟:"
this.strHtml+="<div style='border-top:1px solid red;border-bottom:1px solid red;height:20px;text-align:center'>"
this.strHtml+="<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时<input type='radio'>00时"
this.strHtml+="<input type='radio'>00时"
this.strHtml+="</div>"
this.strHtml+="</td>"
this.strHtml+="</tr>"
this.strHtml+="<tr style='height:20px;background-color:"+this.footeColor+"'>"
this.strHtml+="<td colspan='2' style='text-align:center'><input type='button' value = ' 确认 '></td>"
this.strHtml+="</tr>"
this.strHtml+="</table>";
this.oDrag.innerHTML = this.strHtml;
$('tcancel').onmouseover = function(){
this.style.cursor = "pointer";
}
$('tcancel').onclick = function(){
oThis.ClearAll();
}

this.isDrag && new Drag('oContent', 'otbl' ,{limit : true});
}, setOptions : function(options){
this.option = {
Drag : true, // 是否允许拖拽
center : true, // 是否居中
titleColor : "#C0C0C0", // 标题颜色
footColor : "#C0C0C0"   // 尾部颜色
} Object.extend(this.option, options || {});
}, ClearAll : function(){
/*这里需要将dom清空*/
this.oDrag.innerHTML = null;
this.oDrag.style.position = "";
document.body.removeChild(this.oDrag);
document.body.removeChild(this.oContent);

}
}

Answer 4

html
 <body>  
 <input type="button" value=" 提示信息 " 
 onclick="new InfoAlert('[参数设置]', 'content', {drag:true,center:true}, ['',''])">
 </body>

Answer 5

火狐下透明层用fixed定位，代码复用不是很好