非JavaScript高手不可：如何实现网页的分割条？
一个三行的表格如下：
- HTML code
<table width="100%" border="0"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr></table>
如何用JS实现将中间一行做成分割条，可上下地调整上面表格和下面表格两个表格的大小？
[解决办法]
border-left:1px solid black;border-right:1px solid black;
改成
border-top:1px solid black;
border-bottom:1px solid black;
不就得了
- HTML code
<TITLE> 分隔条 </TITLE><script language="javascript"><!--//------------------------------------// CopyRight (c) 宝玉 2006//------------------------------------var oSplitter, oTdSplitter, oTdTop, oTdBot, oTable;var posTdSplitter, posTable;var bLoaded = false;var bStart = false;var iPadding = 0;function Position(x, y){ this.x = x; this.y = y;}function GetPosition(obj){ var objThis = obj; var oBody = document.body; var oLeft = oTop = 0; while (objThis!=oBody) { oLeft += objThis.offsetLeft; oTop += objThis.offsetTop; objThis = objThis.offsetParent; } return new Position(oLeft, oTop); }function fnInit(){ oSplitter = document.getElementById("splitter"); oTdSplitter = document.getElementById("tdSplitter"); oTdTop = document.getElementById("tdTop"); oTdBot = document.getElementById("tdBot"); oTable = document.getElementById("table"); posTable = GetPosition(oTable); oSplitter.style.height = oTdSplitter.offsetHeight; oSplitter.style.width = oTdSplitter.offsetWidth; bLoaded = true;}function fnMouseDown(event){ if (bLoaded == false) { alert("页面加载未完成，请稍候！"); return; } posTdSplitter = GetPosition(oTdSplitter); iPadding = posTdSplitter.y - event.clientY; oSplitter.style.top = posTdSplitter.y; oSplitter.style.left = posTdSplitter.x; oSplitter.style.display = "block"; if (oSplitter.setCapture) oSplitter.setCapture(); bStart = true;}function fnMouseUp(event){ if (bStart == true) { oSplitter.style.display = "none"; if (event.clientY > posTable.y && event.clientY < posTable.y + oTable.offsetHeight - oTdSplitter.offsetHeight) { oTdTop.style.height = event.clientY - posTable.y; } if (oSplitter.releaseCapture) oSplitter.releaseCapture(); bStart = false; }}function fnMouseMove(event){ if (bStart == true) { oSplitter.style.top = event.clientY + iPadding; }}//--></script></HEAD><body onload="fnInit();" onmouseup="fnMouseUp(event);" onmousemove="fnMouseMove(event);" style="margin:0px;" onselectstart="return false;"><div style="position: absolute;width:4px;height:400px;background-color: black;z-index:9999;display:none;cursor: col-resize;" id="splitter"></div><table cellspacing="0" cellpadding="0" border="0" style="height:100%; width:100%;" id="table"> <tr> <td id="tdTop" > </td> </tr> <tr> <td style="height: 8px; overflow:hidden;cursor: col-resize;border-top:1px solid black;border-bottom:1px solid black;" id="tdSplitter" onmousedown="fnMouseDown(event);"> </td> </tr> <tr> <td id="tdBot" > </td> </tr></table></body></HTML>
[解决办法]
顶+学习~
[解决办法]
- HTML code
<html> <head> <TITLE> 分隔条 </TITLE> <script language="javascript"> <!-- var oSplitter, oTdSplitter, oTdTop, oTdBottom, oTable; var posTdSplitter, posTable; var bLoaded = false; var bStart = false; var iPadding = 0; function Position(x, y){ this.x = x; this.y = y; } function GetPosition(obj){ var objThis = obj; var oBody = document.body; var oLeft = oTop = 0; while (objThis != oBody) { oLeft += objThis.offsetLeft; oTop += objThis.offsetTop; objThis = objThis.offsetParent; } return new Position(oLeft, oTop); } function fnInit(){ oSplitter = document.getElementById("splitter"); oTdSplitter = document.getElementById("tdSplitter"); oTdTop = document.getElementById("tdTop"); oTdBottom = document.getElementById("tdBottom"); oTable = document.getElementById("table"); posTable = GetPosition(oTable); oSplitter.style.height = oTdSplitter.offsetHeight; oSplitter.style.width = oTdSplitter.offsetWidth; bLoaded = true; } function fnMouseDown(event){ if (bLoaded == false) { alert("页面加载未完成，请稍候！"); return; } posTdSplitter = GetPosition(oTdSplitter); iPadding = posTdSplitter.y - event.clientY; oSplitter.style.left = posTdSplitter.x; oSplitter.style.top = posTdSplitter.y; oSplitter.style.display = "block"; if (oSplitter.setCapture) oSplitter.setCapture(); bStart = true; } function fnMouseUp(event){ if (bStart == true) { oSplitter.style.display = "none"; if (event.clientY > posTable.y && event.clientY < posTable.y + oTable.offsetHeight - oTdSplitter.offsetHeight) { oTdTop.style.height = event.clientY - posTable.y; } if (oSplitter.releaseCapture) oSplitter.releaseCapture(); bStart = false; } } function fnMouseMove(event){ if (bStart == true) { oSplitter.style.top = event.clientY + iPadding; } } //--> </script> </HEAD> <body onload="fnInit();" onmouseup="fnMouseUp(event);" onmousemove="fnMouseMove(event);" style="margin:0px;" onselectstart="return false;"> <div style="position: absolute;width:400px;height:2px;background-color: black;z-index:9999;display:none;cursor: row-resize;" id="splitter"> </div> <table cellspacing="0" cellpadding="0" border="1" style="height:100%; width:100%;" id="table"> <tr> <td id="tdTop" height="100px"> topcontent </td> </tr> <tr> <td style="width: 100%; height:1px; overflow:hidden;cursor: row-resize;border-top:1px solid black;border-bottom:1px solid black;" id="tdSplitter" onmousedown="fnMouseDown(event);"> </td> </tr> <tr> <td id="tdBottom"> bottomcontent </td> </tr> </table> </body></HTML>
[解决办法]
怎么搞的？
删掉了条语句。
- HTML code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript">
<!--
var oSplitter, oTdSplitter, oTdTop, oTdBottom, oTable;
var posTdSplitter, posTable;
var bLoaded = false;
var bStart = false;
var iPadding = 0;
function Position(x, y){
this.x = x;
this.y = y;
}
function GetPosition(obj){
var objThis = obj;
var oBody = document.body;
var oLeft = oTop = 0;
while (objThis != oBody) {
oLeft += objThis.offsetLeft;
oTop += objThis.offsetTop;
objThis = objThis.offsetParent;
}
return new Position(oLeft, oTop);
}
function fnInit(){
oSplitter = document.getElementById("splitter");
oTdSplitter = document.getElementById("tdSplitter");
oTdTop = document.getElementById("tdTop");
oTdBottom = document.getElementById("tdBottom");
oTable = document.getElementById("table");
posTable = GetPosition(oTable);
oSplitter.style.height = oTdSplitter.offsetHeight;
oSplitter.style.width = oTdSplitter.offsetWidth;
bLoaded = true;
}
function fnMouseDown(event){
if (bLoaded == false) {
alert("页面加载未完成，请稍候！");
return;
}
posTdSplitter = GetPosition(oTdSplitter);
iPadding = posTdSplitter.y - event.clientY;
oSplitter.style.left = posTdSplitter.x;
oSplitter.style.top = posTdSplitter.y;
oSplitter.style.display = "block";
if (oSplitter.setCapture)
oSplitter.setCapture();
bStart = true;
}
function fnMouseUp(event){
if (bStart == true) {
oSplitter.style.display = "none";
if (event.clientY > posTable.y && event.clientY < posTable.y + oTable.offsetHeight - oTdSplitter.offsetHeight) {
oTdTop.style.height = event.clientY - posTable.y;
}
if (oSplitter.releaseCapture)
oSplitter.releaseCapture();
bStart = false;
}
}
function fnMouseMove(event){
if (bStart == true) {
oSplitter.style.top = event.clientY + iPadding;
}
}
//-->
</script>
</HEAD>
<body onload="fnInit();" onmouseup="fnMouseUp(event);" onmousemove="fnMouseMove(event);" style="margin:0px;" onselectstart="return false;">
<div style="position: absolute;width:400px;height:2px;background-color: black;z-index:9999;display:none;cursor: row-resize;" id="splitter">
</div>
<table cellspacing="0" cellpadding="0" border="1" style="height:100%; width:100%;" id="table">
<tr>
<td id="tdTop" height="100px">
topcontent
</td>
</tr>
<tr>
<td style="width: 100%; height:1px; overflow:hidden;cursor: row-resize;border-top:1px solid black;border-bottom:1px solid black;" id="tdSplitter" onmousedown="fnMouseDown(event);">
</td>
</tr>
<tr>
<td id="tdBottom">
bottomcontent
</td>
</tr>
</table>
</body>
</HTML>