也是改别人的，不过加了个resize的方法，防止层被遮盖
< 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) return null; 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); } else if (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); } 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 // 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); } else if (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); } 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 // 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%" οnclick="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的层已经存在，放弃新建！");return false;} 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%" οnclick="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" οnmοusedοwn="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 >
