可拖动,可拖拉大小的层
来源:互联网 发布:诺瓦led控制软件说明书 编辑:程序博客网 时间:2024/04/29 08:06
也是改别人的,不过加了个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%" 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的层已经存在,放弃新建!");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%" 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>
<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%" 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的层已经存在,放弃新建!");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%" 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>
- 可拖动,可拖拉大小的层
- 可拖动的层
- 可拖动的层
- js可拖动层
- 可拖动层代码
- 可拖动图层
- JS可拖动层
- 可拖动DIV层
- 可拖动改变大小的div
- 可拖动的弹出层提示效果
- 可拖动的弹出层提示效果
- 可拖动的弹出层提示效果
- 鼠标可拖动的浮动层效果
- 可拖动的div弹出层
- 简单可拖动的div层
- JS 弹出可拖动的浮动层
- 可自由拖动的DIV层方块
- 可拖动DIV层的实现方法
- 老贴 java数据库连接
- 关于THIS_FILE
- 我的BLOG新地址:http://www.loverer.com
- 在堆上分配内存——摘自《编程修养》
- LMS
- 可拖动,可拖拉大小的层
- 奚江华畅谈ASP.NET的方方面面记录
- 计算机常用端口一览表
- MapObjects2.2 在C#中的应用(动态加载地图)
- 关于dom4j.jar的一点应用:xml文件的创建
- 苛评MFC: 难以伸展的Windows控件
- 天津“SOA与ESB技术应用”用户交流活动——活动现场《SOA概念、技术与设计》倍受读者热评
- MO 基本的图层动态添加,放大、缩小、漫游功能
- Restorator 2007 Build 1709 韦斯特*金 汉化版