本站隆重推出全新栏目“淘宝网购物导航“：实时更新淘宝的各类促销活动、成交排行、优惠充值等信息，让您网购更加安心，放心，省心！
博客设置 订阅所有【博客设置】的日志

为侧边栏添加面板开关功能

作者:笨花 日期:2008-04-28

字体大小: 小 中 大

具体修改如下（在IE 6、IE 7、FF 2、Opera中均测试通过）：
common\common.js
修改函数initJS：

JavaScript代码
  1. //初始化JS代码   
  2. function initJS(){   
  3.         ReImgSize() //自动缩放代码    
  4.         initAccessKey()  //转换AccessKey For IE   
  5.         addPanelOnClick(); // 添加面板标题鼠标点击处理函数   
  6. }  

在后面添加两个函数：

JavaScript代码
  1. // 添加面板标题鼠标点击处理函数   
  2. function addPanelOnClick(){   
  3.         var sideBar, panel;   
  4.         sideBar = document.getElementById("innersidebar");   
  5.         if (isIE()){// 是IE   
  6.                 for(i = 1; i<sideBar.childNodes.length - 1; i++){   
  7.                         panel = sideBar.childNodes[i];   
  8.                         panel.childNodes[0].onclick = panelOnOff;   
  9.                 }   
  10.         }   
  11.         else{// 不是IE，是Netscape, FireFox, Opera   
  12.                 for(i = 3; i<sideBar.childNodes.length - 3; i++){   
  13.                         panel = sideBar.childNodes[i];   
  14.                         panel.childNodes[0].onclick = panelOnOff;   
  15.                 }   
  16.         }   
  17. }   
  18.   
  19. // 面板开关函数   
  20. function panelOnOff(){   
  21.         var node;   
  22.         node = this.parentNode.childNodes[1];   
  23.         node.style.display = (node.style.display == "") ? "none" : "";   
  24. }  

==================== 华丽的分割线 ====================
看到有朋友发了一个示例代码，受到启发又修改了，增加动态效果
还是修改common\common.js，将上面新增的函数替换下面的代码~

JavaScript代码
  1. // 面板高度数组   
  2. var maxHeight;   
  3.   
  4. // 获得面板索引   
  5. function getPanelIndex(obj){   
  6.         var sideBar, panel, start;   
  7.         sideBar = document.getElementById("innersidebar");   
  8.         start = isIE() ? 1 : 3;   
  9.         for(i = start; i < sideBar.childNodes.length - start; i++){   
  10.                 panel = sideBar.childNodes[i];   
  11.                 if (obj == panel.childNodes[1]){   
  12.                         return i - start;   
  13.                 }   
  14.         }   
  15.         return -1;   
  16. }   
  17.   
  18. // 面板开关动态效果   
  19. function panleOpenClose(obj, action){   
  20.         var index, curHeight, delat;   
  21.         var funcOpen, funcClose, intervalID;   
  22.         index = getPanelIndex(obj);   
  23.         delta = 1;   
  24.         if (action == "Open"){   
  25.                 curHeight = 0;   
  26.                 obj.style.display = "";   
  27.                 funcOpen = function(){   
  28.                         delta *= 2.5;   
  29.                         curHeight += delta;                           
  30.                         if (curHeight > maxHeight[index]){   
  31.                                 obj.style.height = maxHeight[index] + "px";                                   
  32.                                 clearInterval(intervalID);   
  33.                         }else{   
  34.                                 obj.style.height = curHeight + "px";   
  35.                         }   
  36.                 }   
  37.                 intervalID = setInterval(funcOpen, 10);   
  38.         }   
  39.         if (action == "Close"){   
  40.                 curHeight = maxHeight[index];   
  41.                 obj.style.overflow = "hidden";   
  42.                 funcClose = function(){   
  43.                         delta *= 2.5;   
  44.                         curHeight -= delta;   
  45.                         if (curHeight < 10){   
  46.                                 obj.style.height = "0px";   
  47.                                 obj.style.display = "none";   
  48.                                 clearInterval(intervalID);   
  49.                         }else{   
  50.                                 obj.style.height = curHeight + "px";   
  51.                         }   
  52.                 }                   
  53.                 intervalID = setInterval(funcClose, 10);   
  54.         }   
  55. }   
  56.   
  57. // 面板开关函数   
  58. function panelOnClick(){   
  59.         var node, index;   
  60.         node = this.parentNode.childNodes[1];   
  61.         index = getPanelIndex(node);   
  62.         if (index == -1){   
  63.                 return;   
  64.         }   
  65.         if (node.style.display == ""){   
  66.                 panleOpenClose(node, "Close");   
  67.         }else{   
  68.                 panleOpenClose(node, "Open");   
  69.         }   
  70. }   
  71.   
  72. // 添加面板标题鼠标点击处理函数   
  73. function addPanelOnClick(){   
  74.         var sideBar, panel, start, tmpPT, tmpPB;   
  75.         sideBar = document.getElementById("innersidebar");   
  76.         start = isIE() ? 1 : 3;   
  77.         maxHeight = new Array(sideBar.childNodes.length - 2 * start);   
  78.         for(i = start; i<sideBar.childNodes.length - start; i++){   
  79.                 panel = sideBar.childNodes[i];   
  80.                 panel.childNodes[0].onclick = panelOnClick;   
  81.                 panel.childNodes[0].title = "点击我试试看";        // 标题栏提示框，大家自己发挥创意改   
  82.                 tmpPT = panel.childNodes[1].style.paddingTop;   
  83.                 tmpPB = panel.childNodes[1].style.paddingBottom   
  84.                 panel.childNodes[1].style.paddingTop = "0px";   
  85.                 panel.childNodes[1].style.paddingBottom = "0px";   
  86.                 maxHeight[i - start] = panel.childNodes[1].offsetHeight;   
  87.                 panel.childNodes[1].style.paddingTop = tmpPT;   
  88.                 panel.childNodes[1].style.paddingBottom = tmpPB;   
  89.         }   
  90. }  

不过唯一的不足在于，需要等页面完全载入以后功能才能开启。

文章来自: 网络转载
引用通告: 查看所有引用 | 我要引用此文章
Tags: 博客设置
相关日志:
分页:[1][2][3]
评论: 0 | 引用: 0 | 查看次数: -


发表评论
昵　称:
密　码:    游客发言不需要密码.
邮　箱:    支持Gravatar头像
网　址:
验证码:    点击输入框
内　容:
您一共可以输入1000个字
选　项:
不想保留信息请删除cookie！
发表评论后您发表的内容自动复制到了剪贴板
字数限制 1000 字 | UBB代码 开启 | [img]标签 关闭