js常用功能-浮动层知识总结
应用开发时很经常地要生成浮动层，在浮动层里显示一些我们需要显示的内容。生成浮动层主要分为两个部份。一个是外围的div，这个div主要是根据传入的参数值来设置它的属性，如它的left、top、width、height、opacity等值。另一个部份是div里放的一table，这个table有两行，第一行用在拖动和最大化最小化上；第二行是放置浮动层要显示的内容。
function drag(elementToDrag, event) { var startX = event.clientX, startY = event.clientY; var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop; var deltaX = startX - origX, deltaY = startY - origY; if (document.addEventListener) {// DOM Level 2 event model document.addEventListener("mousemove", moveHandler, true); document.addEventListener("mouseup", upHandler, true); } else if (document.attachEvent) {// IE 5+ Event Model elementToDrag.setCapture( ); elementToDrag.attachEvent("onmousemove", moveHandler); elementToDrag.attachEvent("onmouseup", upHandler); elementToDrag.attachEvent("onlosecapture", upHandler); } else {// IE 4 Event Model var oldmovehandler = document.onmousemove; // used by upHandler( ) var olduphandler = document.onmouseup; document.onmousemove = moveHandler; document.onmouseup = upHandler; } if (event.stopPropagation) event.stopPropagation( );// DOM Level 2 else event.cancelBubble = true; // IE if (event.preventDefault) event.preventDefault( ); // DOM Level 2 else event.returnValue = false; // IE function moveHandler(e) { if (!e) e = window.event;// IE Event Model elementToDrag.style.left = (e.clientX - deltaX) + "px"; elementToDrag.style.top = (e.clientY - deltaY) + "px"; if (e.stopPropagation) e.stopPropagation( );// DOM Level 2 else e.cancelBubble = true; // IE } function upHandler(e) { if (!e) e = window.event;// IE Event Model if (document.removeEventListener) {// DOM event model document.removeEventListener("mouseup", upHandler, true); document.removeEventListener("mousemove", moveHandler, true); } else if (document.detachEvent) {// IE 5+ Event Model elementToDrag.detachEvent("onlosecapture", upHandler); elementToDrag.detachEvent("onmouseup", upHandler); elementToDrag.detachEvent("onmousemove", moveHandler); elementToDrag.releaseCapture( ); } else {// IE 4 Event Model document.onmouseup = olduphandler; document.onmousemove = oldmovehandler; } if (e.stopPropagation) e.stopPropagation( );// DOM Level 2 else e.cancelBubble = true; // IE }}function minimize(floatLayerId,event){if (event.stopPropagation) event.stopPropagation( );// DOM Level 2 else event.cancelBubble = true; // IE if (event.preventDefault) event.preventDefault( ); // DOM Level 2 else event.returnValue = false; // IEvar o = document.getElementById(floatLayerId+"TD");var eventElement = event.srcElement || event.target;if(o.style.display != 'none'){o.style.display = 'none';eventElement.src = "/ags_web/css/img/bullet_arrow_down.png";document.getElementById(floatLayerId+"DIV").style.height = "7px";}else{o.style.display = '';eventElement.src = "/ags_web/css/img/bullet_arrow_up.png";}}function EngenderDriftLyr(){}EngenderDriftLyr.prototype = {genDriftDiv:function(driftDivId,driftDivPro){var dirftDiv = document.createElement("div");dirftDiv.id = driftDivId;dirftDiv.className = "float-div";dirftDiv.style.position = "absolute";dirftDiv.style.left = driftDivPro.left||"0px";dirftDiv.style.top = driftDivPro.top||"0px";dirftDiv.style.width = driftDivPro.width||"200px";dirftDiv.style.height = driftDivPro.height||"100px";if(driftDivPro.opacity){dirftDiv.style.opacity = driftDivPro.opacity;dirftDiv.style.filter = 'alpha(opacity=' + parseInt(parseFloat(driftDivPro.opacity)*100) + ')';}dirftDiv.style.borderColor = driftDivPro.borderColor||"#6495ED";dirftDiv.style.zIndex = "1000";dirftDiv.style.display = 'none';trColor = driftDivPro.trColor||"#6495ED";return dirftDiv;},genDriftContent:function(title,floatLayerId,tableAttr){var result = "";floatDivId = floatLayerId + "DIV";contDivId = floatLayerId + "TD"; titleTdId = floatLayerId + "_TITLETD";result ='<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">'+ '<tr class="float-div-cnt-tr" ' + (tableAttr.color?'style="background-color:' + tableAttr.color + '"':"") + '>'+'<td id="' + titleTdId + '"height="20" width="100%" style="color:#FFFFFF;cursor:hand;padding-left:5px;"'+'onmousedown=\"drag(document.getElementById(\'' + floatDivId + '\'),event);\">' + title + '</td>'+'<td width="15" style="color:#FFFFFF;cursor:hand" ><img src="/ags_web/css/img/bullet_arrow_up.png" style="cursor:hand" /></td>'+'<td width="15" style="color:#FFFFFF;cursor:hand" ><img src="/ags_web/css/img/cancel.png" style="cursor:hand" /></td>'+'</tr>'+'<tr><td colspan="3" valign="top">'+'<div id="' + contDivId + '" class="float-div-cnt" style="height:' + (tableAttr.height?tableAttr.height:'') + 'px;"></div>'+' </td></tr>'+'</table>';return result;},genDriftLyr:function(LyrTitle,driftLyrId,driftLyrPro){document.body.appendChild(this.genDriftDiv(driftLyrId+"DIV",driftLyrPro));document.getElementById(driftLyrId+"DIV").innerHTML = this.genDriftContent(LyrTitle,driftLyrId,driftLyrPro);}}var engenderDriftLyr = new EngenderDriftLyr(); 其中，css代码为：
.float-div{left: 40px;width: 250px;position:absolute;opacity: 0.7;filter: alpha(opacity=70);padding:2px;border-width: 1px;border-style: solid;border-color: #AA2DCF;background-color:#FFFFFF;}
大概的代码就如上面所写的，只要思路对了，就没有问题了。
在使用上，我们发一个请求把返回的值设置为table内容的innerHTML，然后设置生成的浮动div为可见的就可以了。
以上代码要注意的地方如下：
1.以上我们先 createElement 一个 DIV 元素，然后设置它的一些如 id 、 className 、 left 、 top 、 height 、 width 、 opacity 、 borderColor 等属性。且这种写法常与 appendChild 一起使用，把生成的元素加载到另一个元素中。
2.floatdiv.style.left = floatLyrPro.left|| "0px" 与floatdiv.style.left=floatLyrPro.left?floatLyrPro.left:"0px";的写法是一样的，我们常用第二种方式的写法，这在当传入的参数为对象时，用于判断对象的属性是否存在的处理很常用。
3.注意什么时候是传 floatdiv ，什么时候是传 floatdiv.id 如：
页:
[1]