现在很多论坛,都按左栏导航右栏内容的浏览方式,为了方便阅读,左栏导航可以折叠起来,也可以展开。
本程序就是要实现该功能,比较一下别人写的程序,自我感觉我写的这个是最简单整洁的。其原理就是通过 JavaScript 控制 frameset 的 cols 属性值来实现折叠和展开。
核心代码:
<script type="text/javascript" language="javascript">
<!--
function ExpandContents(controller)
{
mainFrame = parent.document.getElementById("mainFrame");
if (mainFrame.cols == "150,10,*")
{
//已经展开,收缩之,并更换控制指示
mainFrame.cols = "0,10,*";
controller.src = "controller_expand.gif";
controller.alt = "展开";
}
else
{
//已经收缩,展开之,并更换控制指示
mainFrame.cols = "150,10,*";
controller.src = "controller_collapse.gif";
controller.alt = "折叠";
}
}
-->
</script>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" background="controller_bg.gif">
<img src="controller_collapse.gif" alt="折叠" id="controller" onclick="javascript:ExpandContents(this);" />
</td>
</tr>
</table>
注意:以上代码是建立在左栏宽度为 150,控制栏宽度为 10 的基础上的,您可以根据实际需要进行修改这些数字。
说明:由于美工不行,涉及的相关图片是从网站上下载的。
下载 可折叠左栏导航 完整代码,支持 IE、FF 等浏览浏览器。