您的位置：首页 > Web前端 > HTML

[HTML] 多帧网页制作中一个帧隐藏的解决方案

2006-08-22 20:17 477 查看

[HTML] 多帧网页制作中一个帧隐藏的解决方案

http://windtear.net/archives/2004/12/29/000539.html

BBS 水木清华站登录后的界面是一个多帧页面
左面是导航
右面是内容

中间有一个小三角
点这个小三角可以把左面导航隐藏起来
让右面的内容部分尽可能的大

其实要实现这个非常简单
通过javascript改一下frameset的属性就可以了

水木是通过单独一小帧(一小条)来做的
主要是从美观考虑

这里直接按这个方案给出

多帧网页制作中一个帧隐藏的解决方案:
1. frameset 调整
为了隐藏/显示的javascript代码能够控制
给 frameset 赋一个id值 如 mainframe
相应的 cols 或者 rows 留出那一小条的位置
如:
<FRAMESET name="mainframe" id="mainframe" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0" COLS="180,11,*">
<FRAME SRC="side.html" NAME="side" TARGET="main">
<frame scrolling=no noresize="true" name=toogle marginwidth=0 marginheight=0 src="wtoogle.html">
<FRAME SRC="main.html" NAME="main">
</FRAMESET>

2. 小条部分页面(美观考虑 单独页面小条帧实现)
这样就可以了 很方便
javascript 代码这里就不做解释了 找一个帮助看看 原理前面说了 很简单的
-----> wtoogle.html
<html>
<head>
<style type="text/css">
.o1 {background-color:#718BD6; font-size:10px; color:#ffffff; text-decoration:none;}
body {margin: 0px; background-color: #F6F6F6; }
</style>
<script language="javascript">
<!--
var iniCols, noCols, o_mf, o_ms, s;
function ini() {
o_mf = parent.document.getElementById("mainframe");
o_ms = document.getElementById("menuSwitch");
noCols = iniCols = o_mf.cols;
if ((pos = noCols.indexOf(",")) != -1) {
noCols = "0" + noCols.substring(pos);
}
s = false;
}
function changeLeft(){
s = !s;
o_mf.cols = s ? noCols : iniCols;
o_ms.innerHTML = s ? "►" : "◄";
}
//-->
</script>
</head>
<body onload="ini()">
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<a href="javascript:changeLeft();" class="o1" id="menuSwitch">◄</a>
</td>
</tr>
</table>
</body></html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html javascript border function bbs ini
相关文章推荐
新的分享
章节导航