可拖动分隔栏在firefox中拖动不流畅问题！

最新推荐文章于 2020-03-02 10:04:42 发布

netjourney

最新推荐文章于 2020-03-02 10:04:42 发布

阅读量849

点赞数 1

文章标签： firefox function border javascript table html

本文链接：https://blog.csdn.net/netjourney/article/details/3547548

版权

原方案如下，由js实现：

<html >
<head>
<title></title>
<script language="javascript">
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(e)
{
if (bStart == true)
{
e=e||event;
oSplitter.style.left = e.clientX + iPadding;
}
}

</script>
</head>
<body οnlοad="fnInit();" οnmοuseup="fnMouseUp(event);" οnmοusemοve="fnMouseMove(event);" style="margin:0px;" onselectstart="return false;">

<div style="position: absolute;width:4px;height:100%;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:200px" id="tdLeft">

     目录树
    </td>
<td style="width:4px; overflow:hidden;cursor: col-resize;border-left:1px solid black;border-right:1px solid black;" id="tdSplitter" οnmοusedοwn="fnMouseDown(event);"> </td>
<td id="tdRight" >

      <iframe name="workspace" frameborder="0" style=" width: 100%; height: 100%"></iframe>

</td>
</tr>
</table>
</body>
</html>

======》END!
————————————————————————————————————————————————

解决方案如下，使用html标准标签frameset实现：

<html>
<head>
    <title></title>
    <meta name="designer" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<frameset id="sidebar_content" cols="230, *" frameborder="1" border="6" framespacing="5"
    bordercolor="#A1C7F9">
    <frame name="NavigetionFrame" scrolling="no" frameborder="1" />
    <frame name="ContentFrame" frameborder="0" />
</frameset>
</html>