可折叠左栏导航

作者:chilleen 来源:ITPOW(原创) 日期:2007-4-4

现在很多论坛,都按左栏导航右栏内容的浏览方式,为了方便阅读,左栏导航可以折叠起来,也可以展开。

本程序就是要实现该功能,比较一下别人写的程序,自我感觉我写的这个是最简单整洁的。其原理就是通过 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 等浏览浏览器。

相关文章