使用javascript oop开发滑动（slide) 菜单控件

这里使用原生的javascript，用面向对象的方式创建一个容易维护使用方便的滑动菜单，调用方式如下：

var  $sliding  =  document.getElementById( " silding " );
var  s1  =   new  Sliding();
s1.commands  =  $sliding.getElementsByTagName( " dt " );
s1.panels  =  $sliding.getElementsByTagName( " dd " ); ;
s1.init( " mouseover " ,  " active " );

演示代码分为slide.js和slide.html两个文件

 slide.htm:

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > javascript slide控件演示 </ title >
< style  type ="text/css" >
     /* reset */
    dl,ul,li,dt,dd {  margin : 0 ;  padding : 0 ;  list-style : none ;   }
     /* silding */
    .silding {  width : 200px ;  border : 1px solid #ccc ;  line-height : 25px ;  overflow : hidden ; }
    .silding dt { border-bottom : 1px solid #ccc ;  background-color : #bebebe ;  cursor : pointer }
    .silding dd {  display : none ;  background : #efefef ;  overflow : hidden ;  font-size : 12px ;   }
    .silding .active {  font-weight : bold ; }
</ style >
< script  type ="text/javascript"  src ="slide.js" ></ script >
</ head >

< body >
< div  id ="silding"  class ="silding" >
     < dl >
         < dt  class ="active" > 第一个一级菜单 </ dt >
            < dd  style ="display:block;" >
             < ul >
                 < li >< a  href ="#" > 第一个二级菜单 </ a ></ li >
                 < li > 第一个二级菜单 </ li >
                 < li > 第一个二级菜单 </ li >
             </ ul >
         </ dd >
    </ dl >
     < dl >
         < dt > 第二个一级菜单 </ dt >
            < dd >
             < ul >
                 < li > 第二个二级菜单 </ li >
                 < li > 第二个二级菜单 </ li >
                 < li > 第二个二级菜单 </ li >
             </ ul >
         </ dd >
    </ dl >
     < dl >
         < dt > 第三个一级菜单 </ dt >
            < dd >
             < ul >
                 < li > 第三个二级菜单 </ li >
                 < li > 第三个二级菜单 </ li >
                 < li > 第三个二级菜单 </ li >
             </ ul >
         </ dd >
    </ dl >
</ div >
< script  type ="text/javascript" >
     var  $sliding  =  document.getElementById( " silding " );
     var  s1  =   new  Sliding();
    s1.commands  =  $sliding.getElementsByTagName( " dt " );
    s1.panels  =  $sliding.getElementsByTagName( " dd " ); ;
    s1.init( " mouseover " ,  " active " );
</ script >
</ body >
</ html >

slide.js:

代码

     function  Slider(i, panelHeight) {  // dto
         this .index  =  i;
         this .panelHeight  =  panelHeight;
    }
    
  // class  Sliding {
     function  Sliding(activeIndex) {
         this .commands  =  [];
         this .panels  =  [];
         this .activeIndex  =  activeIndex  ||   0 ;
         this .sliderCache  =  {};
    }
    Sliding.prototype  =  {
         // 绑定事件
        init:  function (eventName, activeCssClass) {
             var  _this  =   this ;
             var  cmds  =  _this.commands;
            _this.activeClass  =  activeCssClass;
             for  ( var  i  =   0 , n  =  cmds.length; i  <  n; i ++ ) {
                cmds[i][ " on "   +  eventName]  =   function (e) {
                    _this.handel( this , e);
                }
                cmds[i].index  =  i;
                 if  (i  ==  _this.activeIndex) {
                    _this.sliderCache  =   new  Slider(i, _this.panels[i].offsetHeight);
                }
            }


        },
         // 事件处理函数
        handel:  function (elem, args) {
             var  _this  =   this ;
             var  index  =  elem.index;
             var  cacheIndex  =  _this.sliderCache.index;
             var  cacheElem  =   _this.commands[cacheIndex];
             if  (index  ==  cacheIndex)  return ;
             var  showPanel  =  _this.panels[index];
             var  hidePanel  =  _this.panels[cacheIndex];
             var  h  =  parseInt(_this.sliderCache.panelHeight);
            showPanel.style.height  =   " 0px " ;
            showPanel.style.display  =   " block " ;
            _this.tween(hidePanel, showPanel, h);
            elem.className  =  _this.activeClass;
            cacheElem.className  =  cacheElem.className.replace(eval( " / ? " + _this.activeClass + "  ?/ " ), "" );
            _this.sliderCache  =   new  Slider(index, h);

        },
         // 动画算法
        tween:  function (obj0, obj1, h) {
            _this  =  arguments.callee;
             var  step  =   20 ;
             if  ( " \v "   ==   " v " ) {
                step  =   30 ;
            }
             if  (h  >   0 ) {
                 var  h0  =  obj0.offsetHeight;
                 var  h1  =  obj1.offsetHeight;
                 if  (h  <  step) {
                    obj0.style.display  =   " none " ;
                    obj0.style.height  =  (h1  +  h)  +   " px " ;
                    obj1.style.height  =  (h1  +  h)  +   " px " ;

                }  else  {
                    h  =  h  -  step;
                    obj0.style.height  =  (h0  -  step)  +   " px " ;
                    obj1.style.height  =  (h1  +  step)  +   " px " ;
                    setTimeout( function () {
                        _this(obj0, obj1, h)
                    },
                     50 )
                }
            }
        }
    }
// }    

 上面就所有代码了这里因为是演示所以让HTML CSS尽量的简化，另外使用jquery的 fn.slideUp fn.slideDown 实现起来会更容易不过我作为一个专业的开发者多了解些原生的JS对技术的提高还是很有帮助。