java改面板大小_JavaScript 拖动改变面板大小

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

代码如下：

#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;

}

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*newHeight0 && newHeight

{

$('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;

}

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; }

posted on 2007-12-24 02:35 -274°C 阅读(1358) 评论(1)  编辑  收藏 所属分类: web前端

Copyright ©2021 -274°C Powered by: 博客园 模板提供：沪江博客