我的页面分左右栏,中间有一个分隔条,可以拖动它来改变左右栏目的宽度。
问题是: 拖动时左边的菜单会全部显示,但是拖动条把右边的部分内容也移到了左边,即拖动条移到了内容之上。、请js高手帮看一下。分数会给解决的问题的高手。我把代码放上:
前台页面:
<table width="100%">
<tr width="100%" height="700" valign="top">
<td width="180"><OA:jstree2 id="tv" style="BEHAVIOR:url(/hbwebapp/webcontrols/jstree3.htc);OVERFLOW:auto;WIDTH:100%;HEIGHT:100%"
onNodeSelected="tvNodeSelected();"></OA:jstree2></td>

<td id="splitterContainer"></td>
<td id="innerDocTD">
<iframe id='frmContainer' style="WIDTH: 100%; HEIGHT: 100%" frameborder='0' scrolling='auto'>
</iframe>
</td>
</tr>
</table>
js脚本:var m_oStartOrg = null;
var m_nLeftMargin = 30;
var m_nRightMargin = 80;
var m_splitter = null; function onSplitterMouseOver()
{
var obj = event.srcElement; if (obj.tagName == "DIV")
obj.className = "activeElement";
} function onSplitterMouseOut()
{
var obj = event.srcElement; if (obj.tagName == "DIV")
obj.className = "";
} function onSplitterMove()
{
if (event.button == 1)
{
if (m_oStartOrg == null)
{
var obj = event.srcElement; m_oStartOrg = new Object(); m_oStartOrg.srcElement = obj;
m_oStartOrg.xOffset = event.x - obj.style.pixelLeft;
m_oStartOrg.yOffset = event.y - obj.style.pixelTop;
m_oStartOrg.xLast = event.x;
m_oStartOrg.yLast = event.y; obj.setCapture();
}
else
{
var obj = m_oStartOrg.srcElement; var nLeft = event.x - m_oStartOrg.xOffset; var oTD = obj.container;
var oPrev = oTD.previousSibling; if (oPrev)
{
if (nLeft <= m_nLeftMargin)
nLeft = m_nLeftMargin;
else
if (nLeft > document.body.offsetWidth - m_nRightMargin)
nLeft = document.body.offsetWidth - m_nRightMargin; obj.style.pixelLeft = nLeft; var nDelta = nLeft - (m_oStartOrg.xLast - m_oStartOrg.xOffset); if (oPrev.style.pixelWidth + nDelta > 0)
oPrev.style.pixelWidth += nDelta;
}
m_oStartOrg.xLast = nLeft + m_oStartOrg.xOffset;
m_oStartOrg.yLast = event.y;
}
}
} function onSplitterUp()
{
var obj = event.srcElement; if (m_oStartOrg)
{
m_oStartOrg.srcElement.releaseCapture();
m_oStartOrg = null;
}
} function onWindowResize()
{
initSplitter(splitterContainer);
} function initSplitter(container)
{
if (!m_splitter)
{
m_splitter = document.createElement('<div style="DISPLAY:NONE;BORDER-RIGHT: #6BA1DE 1px solid;BORDER-LEFT: #6BA1DE 1px solid; CURSOR: w-resize; POSITION: absolute; HEIGHT: 0%"></div>'); document.body.insertAdjacentElement("afterBegin", m_splitter);
m_splitter.style.width = "4px";
} with(container)
{
m_splitter.style.left = absLeft(container);
m_splitter.style.top = absTop(container);
m_splitter.style.height = container.offsetHeight;
m_splitter.style.display = "inline";
m_splitter.container = container; m_splitter.onmousemove = onSplitterMove;
m_splitter.onmouseup = onSplitterUp;
m_splitter.onmouseover = onSplitterMouseOver;
m_splitter.onmouseout = onSplitterMouseOut;
}
}