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;                     // IE
	
	var 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" onclick="minimize(\'' + floatLayerId + '\',event)"><img src="/ags_web/css/img/bullet_arrow_up.png" style="cursor:hand" /></td>'
				+'<td width="15" style="color:#FFFFFF;cursor:hand" onclick="document.getElementById(\'' + floatDivId + '\').style.display=\'none\'"><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 如：

document.getElementById(\''+floatdiv.id+'\')

这里显然不能传 floatdiv ，因为 floatdiv 是一个 obj ，如果外面再嵌一个 document.getElementById 就有问题了，这时候应该传的是 floatdiv.id ，这点容易写错。