TAB.JPG

上面是实际效果,虽然丑陋。不过当时写这个效果的时候也并不顺利。

代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#tab
{
 table-layout:auto;
 border-collapse:collapse;
 border:1px solid #000000;
 width:100%;
}
div
{
 width:100%;
 margin:0px;
 padding:0px;
 overflow:auto;
 border: 1px solid #4CA2ED;
 background-color:#E8F2FE;
 font-size:9pt;
}
td
{
 position:relative;
 padding:0px;
 margin:0px;
}
</style>
<script type="text/javascript">
function $(dom_id)
{
 return document.getElementById(dom_id);
}
function MouseDownToResize(obj)

 obj.mouseDownY = event.clientY;
 $('td1').pareneTdH = $('td1').offsetHeight;
 $('td2').pareneTdH = $('td2').offsetHeight;
 $('td3').pareneTdH = $('td3').offsetHeight;
 $('tab').pareneTableH = $('tab').offsetHeight;
 obj.setCapture();//事件扩张
}
function MouseMoveToResize(obj)

 if(!obj.mouseDownY) return false;
 var newHeight = $('td2').pareneTdH*1+event.clientY*1-obj.mouseDownY;
 //拖动
 if((newHeight<0 && -1*newHeight<$('td1').pareneTdH )||(newHeight>0 && newHeight<$('td3').pareneTdH))
 {
    $('td1').style.height = $('td1').pareneTdH+newHeight;
    $('td3').style.height = $('td3').pareneTdH-newHeight;
 $('div1').style.height = $('td1').pareneTdH+newHeight;
    $('div3').style.height = $('td3').pareneTdH-newHeight;
 $('tab').style.height = $('tab').pareneTableH;
 window.status = newHeight +"||"+ $('td3').style.height;
 }
}
function MouseUpToResize(obj)
{
    obj.releaseCapture();
    obj.mouseDownY=0;
}
</script>
</head>
<body>
  <table id="tab" cellpadding="0" cellspacing="0">
    <tr><td valign=top id="td1"><div id="div1" style="height:250px;">
<pre> 
function $(dom_id)
{
 return document.getElementById(dom_id);
}
function MouseDownToResize(obj)

 obj.mouseDownY = event.clientY;
 $('td1').pareneTdH = $('td1').offsetHeight;
 $('td2').pareneTdH = $('td2').offsetHeight;
 $('td3').pareneTdH = $('td3').offsetHeight;
 $('tab').pareneTableH = $('tab').offsetHeight;
 obj.setCapture();//事件扩张
}
function MouseMoveToResize(obj)

 if(!obj.mouseDownY) return false;
 var newHeight = $('td2').pareneTdH*1+event.clientY*1-obj.mouseDownY;
 //拖动
 if((newHeight<0 && -1*newHeight<=$('td1').pareneTdH )||(newHeight>0 && newHeight<=$('td3').pareneTdH))
 {
    $('td1').style.height = $('td1').pareneTdH+newHeight;
    $('td3').style.height = $('td3').pareneTdH-newHeight;
 $('div1').style.height = $('td1').pareneTdH+newHeight;
    $('div3').style.height = $('td3').pareneTdH-newHeight;
 $('tab').style.height = $('tab').pareneTableH;
 window.status = newHeight +"||"+ $('td3').style.height;
 }
}
function MouseUpToResize(obj)
{
    obj.releaseCapture();
    obj.mouseDownY=0;
}
</pre>
 </div></td></tr>
 <tr bgcolor="#000" height="2" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);" style="cursor:n-resize;"><td id="td2"></td></tr>
 <tr><td id="td3"><div id="div3" style="height:150px;"></div></td></tr>
  </table>
</body>
</html>
posted on 2007-12-24 02:35 -274°C 阅读(1336) 评论(1)  编辑  收藏 所属分类: web前端


FeedBack:
# re: JavaScript 拖动改变面板大小[未登录]
2007-12-24 09:34 | BeanSoft
感谢!  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 

常用链接

留言簿(21)

随笔分类(265)

随笔档案(242)

相册

JAVA网站

关注的Blog

搜索

  •  

积分与排名

  • 积分 - 872776
  • 排名 - 37

最新评论