非JavaScript高手不可：怎么实现网页的分割条-JavaSript-爱易网页

非JavaScript高手不可：怎么实现网页的分割条

日期：2014-05-16　浏览次数：20457 次

非JavaScript高手不可：如何实现网页的分割条？
一个三行的表格如下：

HTML code


<table width="100%" border="0">
  <tr> 
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</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" >&nbsp;</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);">&nbsp;</td>
 </tr>
 
 <tr>
    <td id="tdBot" >&nbsp;</td>
  </tr>

</table>
</body>
</HTML>

------解决方案--------------------
顶+学习~

------解决方案--------------------
HTML code<h

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

非JavaScript高手不可：怎么实现网页的分割条

相关资料更多>

推荐阅读更多>