« http://windtear.net - windtear 追求完美分别登上了google首位 |
Main
| rpm spec 中一个配置rpmnew的处理方式 »
December 29, 2004
[HTML] 多帧网页制作中一个帧隐藏的解决方案
版权声明：可以任意转载，转载时请务必以超链接形式标明文章原始出处和作者信息及本声明。
https://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>
|
|
Posted by windtear at December 29, 2004 11:37 AM
