两种情况的splitter
两种情况的splitter
第一种：所有内容都在一个页面，其中左面导航或操作，右面是展示
Code<table style="width: 100%; height: 100%;" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="width: 130px; height: 100%;" align="left" valign="top" class="divbg_1">
<div id="divTreeView" style="height: 100%; width: 130px; overflow: hidden;">
</div>
</td>
<td style="width: 9px; background-image: url(images/menu/splitter_bg.gif); vertical-align: middle;">
<div id="divLeft" style="width: 9px; height: 79px; background-image: url(images/menu/splitter_l.gif);
cursor: hand;" onclick="split(0)" title="隐藏菜单">
</div>
<div id="divRight" style="display: none; width: 9px; height: 79px; background-image: url(images/menu/splitter_r.gif);
cursor: hand;" onclick="split(1)" title="显示菜单">
</div>
</td>
<td style="background-color: White; width: 100%; height: 640px;" valign="top">
<iframe id="iframes" name="iframes" style="vertical-align: top;" width="100%" height="100%"
scrolling="no" frameborder="0" marginwidth="0" marginheight="0" runat="server"></iframe>
</td>
</tr>
</table>
Codefunction splitter(dirc)
{
var divTree = this.document.all("divTreeView");
var divLeft = this.document.all("divLeft");
var divRight = this.document.all("divRight");
var divGridView = this.document.all("divGrid");
if (dirc == 1)
{
divTree.style.display = "";
divLeft.style.display = "";
divRight.style.display = "none";
divGridView.style.width = "755";
}
else
{
divTree.style.display = "none";
divLeft.style.display = "none";
divRight.style.display = "";
divGridView.style.width = "968px";
}
}
第二种：用frameset，左面导航，右面展示
Code<frameset id="showframe" cols="200,7,*" frameborder="no" border="0" framespacing="0">
<frame src="../left/left2.html" name="leftFrame" scrolling="auto" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="../arrow.html" scrolling="No" noresize="noresize"/>
<frame src="../main/main2.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
arrow.html代码
Code<body bgcolor="#cbd8f3">
<table height="100%" width="7" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img id="arrow_1" onclick="disframe()" src="images/frame_arrow1.gif" /><img id="arrow_2"
onclick="showframe()" style="display: none" src="images/frame_arrow2.gif" />
</td>
</tr>
</table>
<script language="javascript">
function disframe() {
window.parent.showframe.cols = "0,7,*"
arrow_1.style.display = "none";
arrow_2.style.display = "";
}
function showframe() {
window.parent.showframe.cols = "200,7,*"
arrow_1.style.display = "";
arrow_2.style.display = "none";
}
</script>
</body>
