<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript">... <!-- function getMaxIndex()...{ //取当前所有层的最大z-index var s=document.getElementsByTagName("DIV"); var temp=1; for(var i=0;i<s.length;i++) temp=Math.max(temp,s[i].style.zIndex); return temp; } function getMaxLayer()...{ //取当前在最上面的层 var s=document.getElementsByTagName("DIV"); if (!s) returnnull; var temp=0; var j=0; for(var i=0;i<s.length;i++) if (s[i].style.zIndex>temp) ...{temp=s[i].style.zIndex;j=i}; return s[j]; } function swaplayer(layer1,layer2)...{ //交换两个层的顺序 var t=layer2.style.zIndex; layer2.style.zIndex=layer1.style.zIndex; layer1.style.zIndex=t; } function xx_SetTop(obj)...{ var maxzindexlayer=getMaxLayer(); if (maxzindexlayer) swaplayer(maxzindexlayer,obj); } function WhatsNavigator()...{ //判断浏览器 if (window.navigator.userAgent.indexOf("MSIE")>=1)...{ return"IE"; }else...{ if (window.navigator.userAgent.indexOf("Firefox")>=1)...{ return"FF"; }else...{ return"ELSE"; } } } function xx_OpenClose(id)...{ var LayerObj=document.getElementById(id); var Nav=WhatsNavigator(); if (Nav=="IE") var childObj=LayerObj.childNodes[1]; else...{ var childObj=document.getElementById(id +"_content"); var tempobj=LayerObj.getElementsByTagName("DIV"); // var childObj=tempobj[3]; } var LayerObjOldHeight=LayerObj.getAttribute("OLDHEIGHT"); if (LayerObjOldHeight==null)...{ childObj.style.display="none"; LayerObj.setAttribute("OLDHEIGHT",LayerObj.clientHeight,0); if (Nav=="IE") LayerObj.style.height=LayerObj.firstChild.style.height; else // LayerObj.style.height=tempobj[0].style.height; LayerObj.style.height=document.getElementById(id +"_title").style.height; }else...{ childObj.style.display=""; LayerObj.style.height=LayerObj.getAttribute("OLDHEIGHT"); LayerObj.removeAttribute("OLDHEIGHT"); } } function xx_BeginMove(id, event) ...{ // The mouse position (in window coordinates) // at which the drag begins var elementToDrag=document.getElementById(id); var startX = event.clientX, startY = event.clientY; // xx_SetTop(elementToDrag); // The original position (in document coordinates) of the // element that is going to be dragged. Since elementToDrag is // absolutely positioned, we assume that its offsetParent is the // document body. var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop; // Even though the coordinates are computed in different // coordinate systems, we can still compute the difference between them // and use it in the moveHandler( ) function. This works because // the scrollbar position never changes during the drag. var deltaX = startX - origX, deltaY = startY - origY; // Register the event handlers that will respond to the mousemove events // and the mouseup event that follow this mousedown event. if (document.addEventListener) ...{ // DOM Level 2 event model // Register capturing event handlers document.addEventListener("mousemove", moveHandler, true); document.addEventListener("mouseup", upHandler, true); } elseif (document.attachEvent) ...{ // IE 5+ Event Model // In the IE event model, we capture events by calling // setCapture( ) on the element to capture them. elementToDrag.setCapture( ); elementToDrag.attachEvent("onmousemove", moveHandler); elementToDrag.attachEvent("onmouseup", upHandler); // Treat loss of mouse capture as a mouseup event. elementToDrag.attachEvent("onlosecapture", upHandler); } else...{ // IE 4 Event Model // In IE 4 we can't use attachEvent( ) or setCapture( ), so we set // event handlers directly on the document object and hope that the // mouse events we need will bubble up. var oldmovehandler = document.onmousemove; // used by upHandler( ) var olduphandler = document.onmouseup; document.onmousemove = moveHandler; document.onmouseup = upHandler; } // We've handled this event. Don't let anybody else see it. if (event.stopPropagation) event.stopPropagation( ); // DOM Level 2 else event.cancelBubble =true; // IE // Now prevent any default action. if (event.preventDefault) event.preventDefault( ); // DOM Level 2 else event.returnValue =false; // IE /**//** * This is the handler that captures mousemove events when an element * is being dragged. It is responsible for moving the element. **/ function moveHandler(e) ...{ if (!e) e = window.event; // IE Event Model // Move the element to the current mouse position, adjusted as // necessary by the offset of the initial mouse-click. if ((e.clientX - deltaX)<=0) elementToDrag.style.left ="0px"; else elementToDrag.style.left = (e.clientX - deltaX) +"px"; if ((e.clientY - deltaY)<=0) elementToDrag.style.top ="0px"; else elementToDrag.style.top = (e.clientY - deltaY) +"px"; // And don't let anyone else see this event. if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2 else e.cancelBubble =true; // IE } /**//** * This is the handler that captures the final mouseup event that * occurs at the end of a drag. **/ function upHandler(e) ...{ if (!e) e = window.event; // IE Event Model // Unregister the capturing event handlers. if (document.removeEventListener) ...{ // DOM event model document.removeEventListener("mouseup", upHandler, true); document.removeEventListener("mousemove", moveHandler, true); } elseif (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 // Restore the original handlers, if any document.onmouseup = olduphandler; document.onmousemove = oldmovehandler; } // And don't let the event propagate any further. if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2 else e.cancelBubble =true; // IE } } function xx_Resize(id, event) ...{ var elementToDrag=document.getElementById(id); 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 // Register capturing event handlers document.addEventListener("mousemove", moveHandler, true); document.addEventListener("mouseup", upHandler, true); } elseif (document.attachEvent) ...{ // IE 5+ Event Model // In the IE event model, we capture events by calling // setCapture( ) on the element to capture them. elementToDrag.setCapture( ); elementToDrag.attachEvent("onmousemove", moveHandler); elementToDrag.attachEvent("onmouseup", upHandler); // Treat loss of mouse capture as a mouseup event. elementToDrag.attachEvent("onlosecapture", upHandler); } else...{ // IE 4 Event Model // In IE 4 we can't use attachEvent( ) or setCapture( ), so we set // event handlers directly on the document object and hope that the // mouse events we need will bubble up. var oldmovehandler = document.onmousemove; // used by upHandler( ) var olduphandler = document.onmouseup; document.onmousemove = moveHandler; document.onmouseup = upHandler; } // We've handled this event. Don't let anybody else see it. if (event.stopPropagation) event.stopPropagation( ); // DOM Level 2 else event.cancelBubble =true; // IE // Now prevent any default action. if (event.preventDefault) event.preventDefault( ); // DOM Level 2 else event.returnValue =false; // IE /**//** * This is the handler that captures mousemove events when an element * is being dragged. It is responsible for moving the element. **/ function moveHandler(e) ...{ if (!e) e = window.event; // IE Event Model // Move the element to the current mouse position, adjusted as // necessary by the offset of the initial mouse-click. /**//* if ((e.clientX - deltaX)<=0) elementToDrag.style.left = "0px"; else elementToDrag.style.left = (e.clientX - deltaX) + "px"; if ((e.clientY - deltaY)<=0) elementToDrag.style.top = "0px"; else elementToDrag.style.top = (e.clientY - deltaY) + "px";*/ if ((e.clientX - origX)<=40) elementToDrag.style.width="40px"; else elementToDrag.style.width= (e.clientX - origX) +"px"; if ((e.clientY - origY)<=40) elementToDrag.style.height ="40px"; else elementToDrag.style.height= (e.clientY - origY) +"px"; // And don't let anyone else see this event. if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2 else e.cancelBubble =true; // IE } /**//** * This is the handler that captures the final mouseup event that * occurs at the end of a drag. **/ function upHandler(e) ...{ if (!e) e = window.event; // IE Event Model // Unregister the capturing event handlers. if (document.removeEventListener) ...{ // DOM event model document.removeEventListener("mouseup", upHandler, true); document.removeEventListener("mousemove", moveHandler, true); } elseif (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 // Restore the original handlers, if any document.onmouseup = olduphandler; document.onmousemove = oldmovehandler; } // And don't let the event propagate any further. if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2 else e.cancelBubble =true; // IE } } function xx_Layer(id,title,width,height,left,top,content)...{ this.id=id; this.title=title; this.style="BORDER: #f0f0f0 3px outset;FONT-SIZE: 12px;BACKGROUND-COLOR: #d4d0c8;"; this.left=left; this.titlestyle="font-size:13px; background-color: #0A246A; color: #FFFFFF;height:24px;line-height:24px;padding-left:5px;"; this.top=top; this.width=width; this.height=height; this.zIndex=getMaxIndex()+1; this.innerHTML=content; // this.resizeable=false; if (content) this.draw(); } xx_Layer.prototype.HTML=function(head,content)...{ var me=document.getElementById(this.id); if (head)...{ var me_head=document.getElementById(this.id +"_title"); me_head.innerHTML="<table width="100%" border="0"><tr><td width="99%" style="color:#ffffff;font-size:12px;"><div onMouseDown="xx_BeginMove('"+this.id +"',event);" style="FLOAT: left; OVERFLOW: hidden; WIDTH: 88%; CURSOR: move; TEXT-ALIGN: left;"> "+ head +"</div></td><td width="1%" onclick="xx_OpenClose('"+this.id +"');"><span style="color:#ffffff;font-size:12px;cursor:pointer;">□</span></td></tr></table>"; } if (content)...{ var me_content=document.getElementById(this.id +"_content"); me_content.childNodes[0].childNodes[0].childNodes[0].childNodes[0].innerHTML=content; } } xx_Layer.prototype.draw=function()...{ var xlayer=document.getElementById(this.id); if (xlayer)...{alert("相同ID的层已经存在,放弃新建!");returnfalse;} var xlayer=document.createElement("DIV"); xlayer.setAttribute("id",this.id); xlayer.style.cssText=this.style +"width:"+this.width +";height:"+this.height +";left:"+this.left +";top:"+this.top +";z-index:"+this.zIndex +";position:absolute;"; xlayer.onclick=function()...{xx_SetTop(xlayer);} document.body.appendChild(xlayer); var xlayer_title=document.createElement("DIV"); xlayer_title.style.cssText=this.titlestyle; xlayer_title.setAttribute("id",this.id+"_title"); xlayer_title.innerHTML="<table width="100%" border="0"><tr><td width="99%" style="color:#ffffff;font-size:12px;"><div onMouseDown="xx_BeginMove('"+this.id +"',event);" style="FLOAT: left; OVERFLOW: hidden; WIDTH: 88%; CURSOR: move; TEXT-ALIGN: left;"> "+this.title +"</div></td><td width="1%" onclick="xx_OpenClose('"+this.id +"');"><span style="color:#ffffff;font-size:12px;cursor:pointer;">□</span></td></tr></table>"; xlayer.appendChild(xlayer_title); var xlayer_child=document.createElement("Table"); xlayer_child.setAttribute("width","100%"); xlayer_child.setAttribute("height","100%"); xlayer_child.setAttribute("id",this.id+"_content"); xlayer.appendChild(xlayer_child); var newRow=xlayer_child.insertRow(0); var c0=newRow.insertCell(0); c0.setAttribute("align","left"); c0.setAttribute("valign","top"); var t="<div style="width:100%;height:"; var Nav=WhatsNavigator(); if (Nav=="IE") t+="100%"; else t+=this.height-30+"px"; t+=";overflow:auto;">"+this.innerHTML +"</div>"; c0.innerHTML=t; var c1=newRow.insertCell(1); c1.setAttribute("width",3); var newRow=xlayer_child.insertRow(1); if (Nav=="IE")...{ var c0=newRow.insertCell(0); c0.setAttribute("height",3); var c1=newRow.insertCell(1); c1.setAttribute("width",3); c1.setAttribute("height",3); c1.innerHTML=" "; c1.style.cssText="cursor:nw-resize;"; var me=this; c1.onmousedown=function()...{ xx_Resize(me.id,event); }; }else newRow.innerHTML="<TD height="3"></TD><TD width="3" height="3" onmousedown="xx_Resize('"+this.id +"',event);" style="cursor:nw-resize;"> </TD>"; } //--> </script> </head> <body> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <table width="1200" border="1"> <tr> <td> </td> </tr> </table> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <script>... var newlayer1=new xx_Layer("layer1","测试",140,500,100,50); newlayer1.style="background-color: #D4D0C8;border: 3px outset #f0f0f0;font-size:12px;padding: 0px 0px 0px 0px;"; newlayer1.innerHTML="<table border=3><tr><td>测试内容1111111</td></tr></table>" newlayer1.draw(); var newlayer2=new xx_Layer("layer2","测试2",300,200,230,100); newlayer2.titlestyle="font-size:13px; background-color: #FF3300; color: #FFFFFF;height:24px;line-height:24px;padding-left:5px;"; newlayer2.innerHTML="拖拖"; newlayer2.draw(); var s="<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p>" var newlayer3=new xx_Layer("layer3","测试3",300,200,150,150,s); newlayer3.HTML("","connnfdsafas"); //newlayer3.zIndex=10; </script> </body> </html>