非JavaScript高手不可：如何实现网页的分割条？

我见过一个左右分割条，代码如下。但我希望的是上下分割条。
或者请高手帮忙改一改变成上下分割条：
<TITLE> 分隔条 </TITLE>
<script language="javascript">
<!--
//------------------------------------
// CopyRight (c) 宝玉 2006
//------------------------------------
var oSplitter, oTdSplitter, oTdLeft, oTdRight, 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");
 oTdLeft = document.getElementById("tdLeft");
 oTdRight = document.getElementById("tdRight");
 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.x - event.clientX;
 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.clientX > posTable.x && event.clientX < posTable.x + oTable.offsetWidth - oTdSplitter.offsetWidth)
  {
   oTdLeft.style.width = event.clientX - posTable.x;
  }
  if (oSplitter.releaseCapture)
   oSplitter.releaseCapture();
  bStart = false;
 }
}
function fnMouseMove(event)
{
 if (bStart == true)
 {
  oSplitter.style.left = event.clientX + 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 style="width:50%;" id="tdLeft">leftcontent</td>
  <td style="width: 8px; overflow:hidden;cursor: col-resize;border-left:1px solid black;border-right:1px solid black;" id="tdSplitter" onmousedown="fnMouseDown(event);">&nbsp;</td>
  <td id="tdRight">rightcontent</td>
 </tr>
</table>
</body>
</HTML>

解决方案 »

  1.   

    border-left:1px solid black;border-right:1px solid black;改成  
          border-top:1px solid black;
         border-bottom:1px solid black;不就得了<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>
      

  2.   

    <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);">&nbsp;</td>
    </tr>
    <tr>
                    <td id="tdBottom">
                        bottomcontent
                    </td>
                </tr>
            </table>
        </body>
    </HTML>
      

  3.   

    怎么搞的？
    删掉了条语句。
    <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);">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td id="tdBottom">
                        bottomcontent 
                    </td>
                </tr>
            </table>
        </body>
    </HTML>