分割条(摘自宝玉的js作品集)

分割条(摘自宝玉的js作品集)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<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>
 
引用:http://bbs.51js.com/viewthread.php?tid=13537

你可能感兴趣的:(分割条(摘自宝玉的js作品集))