注册 | 登录 | 设为首页 | 加入收藏
您当前的位置:飞翔学院-IT中国 → 编程开发JavaScript → 文章内容

可折叠左栏导航

作者:佚名 来源:不详 发布时间:2008-5-23 8:59:40

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

本程序就是要实现该功能,比较一下别人写的程序,自我感觉我写的这个是最简单整洁的。其原理就是通过 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 = "http://www.cftea.com/c/2007/04/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="http://www.cftea.com/c/2007/04/controller_collapse.gif" alt="折叠" id="controller" />
    </td>
  </tr>
</table>

注意:以上代码是建立在左栏宽度为 150,控制栏宽度为 10 的基础上的,您可以根据实际需要进行修改这些数字。

说明:由于美工不行,涉及的相关图片是从网站上下载的。

下载 可折叠左栏导航 完整代码,支持 IE、FF 等浏览浏览器。


  • 打印文档
  • 推荐好友
  • 返回顶部
  • 增大字体
  • 减少字体

热点文章

关于本站 | 工作机会 | 合作网站 | 广告服务 | 市场合作| 联系我们 | 抽奖活动
版权所有: 武汉威俊科技有限公司 Copyright 2005-2007 www.ITCNW.COM All rights reserved