您的位置：首页 > 其它

两种情况的splitter

2008-12-12 15:28 218 查看

第一种：所有内容都在一个页面，其中左面导航或操作，右面是展示




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>




Code
function 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航