WEB开发网
开发学院网页设计JavaScript Javascript多级菜单 阅读

Javascript多级菜单

 2010-09-14 13:24:38 来源:WEB开发网   
核心提示:本文示例源代码或素材下载 一、开篇 一直都苦于找不到合适的菜单,最近自己做了一个,Javascript多级菜单,感觉收获不小,拿出来分享,这是通过一下代码来实现的open:function(){this.clearCloseTimeout();if(this.childMenu)this.childMenu.s

本文示例源代码或素材下载

一、开篇

一直都苦于找不到合适的菜单,最近自己做了一个,感觉收获不小,拿出来分享。先看效果:

Javascript多级菜单

Javascript多级菜单

Javascript多级菜单

Javascript多级菜单

Javascript多级菜单

二、原理1、关于鼠标事件

首先说一下mouseover和mouseout这两个事件,在IE和其他浏览器有一些差别。

在IE中,当发生mouseover事件的时候,e.srcElement可以获得鼠标移入的元素,e.fromElement可以获得鼠标是从哪个元素移入的,e.toElement就是e.srcElement;

在IE中,当发生mouseout事件的时候,e.srcElement可以获得鼠标移出的元素,e.fromElement和e.srcElement是一样的,e.toElement可以获得鼠标移动到当前的元素;

在DOM中,mouseover和mouseout所发生的元素可以通过e.target来访问,相关元素是通过e.relatedTarget来访问的(在mouseover中相当于IE的e.fromElement,在mouseout中相当于IE的e.toElement);

Javascript多级菜单

对于这样一种标签的嵌套关系,对ul注册mouseover和mouseout事件,鼠标从ul外面移入到最里面的a上面,会出现什么情况?

答案是会出现三次mouseover和两次mouseout,虽然没有直接给li和a注册事件,但是由于事件的冒泡,也会被ul注册的mouseover和mouseout事件响应。这样一来,整过过程就是这样的:

在IE中

ordertypesrcElementfromElementtoElement
1mouseoverul其他ul
2mouseoutululli
3mouseoverliulli
4mouseoutlilia
5mouseoveralia

在DOM中

ordertypetargetrelatedTarget
1mouseoverul其他
2mouseoutulli
3mouseoverliul
4mouseoutlia
5mouseoverali

如果我想在移入ul的时候,只响应一次mouseover和mouseout(无论移动到ul里面的li还是里面的a上面),应该如何做呢?

$("childItems").onmouseover=function(e){
  e=e||window.event;
  vartarget=e.target||e.srcElement;
  varrelatedTarget=e.relatedTarget||e.fromElement;
  if(!$(relatedTarget).descendantOf(this)&&$(relatedTarget)!=this){
    clearTimeout(timeoutId);
    timeoutId=null;
  }
}
$("childItems").onmouseout=function(e){
  e=e||window.event;
  vartarget=e.target||e.srcElement;
  varrelatedTarget=e.relatedTarget||e.toElement;
  if(!$(relatedTarget).descendantOf(this)&&$(relatedTarget)!=this){//如果relatedTarget不是ul本身或者不是ul的子元素
    close();
  }  
}

mouseover事件发生的时候,判断relatedTarget(IE中的fromElement),如果relatedTarget是其他元素(不是ul的子元素也不是ul本身,表示鼠标从外面移入ul)才会响应,而在ul移入li或者li移入a的时候就不会相应。

同理,发生mouseout的时候,判断relatedTarget(IE中的toElement),如果relatedTarget是其他元素(不是ul的子元素也不是ul本身,表示鼠标从ul或者其子元素移出)才会响应,而在a移出到li或者li移出到ul的时候就不会相应。

2、简单菜单

Javascript多级菜单

鼠标移动到button上,则弹出子菜单;

鼠标移开button,则开始关闭菜单的setTimeout;

在timeout还未到的时候移入子菜单,则clearTimeout;

鼠标移出子菜单,则开始关闭菜单的setTimeout;

此时鼠标如果再移动到button上或者是移回到子菜单上,都需要clearTimeout,所以的mouseover也要先clearTimeout;

3、多级菜单的逻辑

Javascript多级菜单

在途中,对于item1-3这个MenuItem,depth属性(深度)为1(根菜单的深度为0,其子菜单深度为1,以此类推);childMenu是子菜单,当鼠标移动到MenuItem上面的时候,其子菜单则会显示;items属性是子菜单的MenuItem集合;parent属性是对上一级的MenuItem的引用。

多级菜单比起简单菜单,各个MenuItem之间的逻辑关系是非常重要的:

总的来说,鼠标移出任何一个菜单,都要开始计时关闭所有的菜单

当鼠标移入任何一个菜单,除了显示他的子菜单(如果有的话)之外,还需要做两件事情:

1、 显示他的所有父菜单,如果父菜单已经显示的话,则清除计时关闭。这是通过一下代码来实现的

open:function(){
  this.clearCloseTimeout();
  if(this.childMenu)
    this.childMenu.show();
},
  
vartemp=self;
while(temp){
  temp.open();
  temp=temp.parent;
}

2、 关闭所有兄弟菜单的子菜单,因为当前菜单可能会弹出自己的子菜单,所以这个时候要关闭所有的兄弟菜单的子菜单。这是通过以下代码来实现的:

varitems=self.parent?self.parent.items:self.menu.rootItems;
items.each(function(item){
  if(self!=item)
     item.closeAll();
});

三、代码

Menu类

varMenu=Class.create({
  initialize:function(childMenuClassName){
    this.rootItems=[];
    this.currentItem=null;//当前展开的MenuItem
    this.childMenuClassName=childMenuClassName;
  },
  addItem:function(rootItem){
    rootItem.depth=0;
    rootItem.parent=null;
    rootItem.menu=this;
    this.rootItems.push(rootItem);
  },
  render:function(){
    this.rootItems.each(function(item,index){
      item.render();
    });
  }
});

MenuItem类

varMenuItem=Class.create({
  initialize:function(element){
    this.element=$(element);
    this.items=null;
    this.closeTimeoutId=null;
    this.menu=null;
    this.childMenu=null;
    this.depth=0;
    this.parent=null;
  },
  addItem:function(menuItem){
    if(!this.items)
      this.items=[];
    menuItem.parent=this;
    menuItem.depth=this.depth+1;
    menuItem.menu=this.menu;
    this.items.push(menuItem);
  },
  isParentOf:function(childItem){//判断当前item是不是childItem的parent
    vartemp=childItem;
    while(temp.parent){
      if(temp.parent==this)
        returntrue;
      temp=temp.parent;
    }
    returnfalse;
  },
  topItem:function(){
    vartemp=this;
    while(temp){
      if(temp.depth==0)
        returntemp;
      temp=temp.parent;
    }
    returntemp;
  },
  render:function(){
    varself=this;
    functionelementMouseOver(e){
      //关闭所有兄弟菜单
      varitems=self.parent?self.parent.items:self.menu.rootItems;
      items.each(function(item){
        if(self!=item)
          item.closeAll();
      });
      
      self.clearCloseTimeout();
      if(self.depth==0){
        self.childMenu.setStyle({
          "top":self.element.cumulativeOffset().top+self.element.getHeight()+"px",
          "left":self.element.cumulativeOffset().left+"px"
        });
      }else{
        self.childMenu.setStyle({
          "top":self.element.cumulativeOffset().top+"px",
          "left":self.element.cumulativeOffset().left+self.element.getWidth()+"px"
        });
      }
      //
      vartemp=self;
      while(temp){
        temp.open();
        temp=temp.parent;
      }
      //self.childMenu.show();
      self.menu.currentItem=self;
    }
    this.element.observe("mouseover",elementMouseOver.bindAsEventListener());
    functionelementMouseOut(e){
      //关闭当前的子菜单
      self.timeoutClose();
    }
    this.element.observe("mouseout",elementMouseOut.bindAsEventListener());
  
    this.childMenu=$(document.createElement("ul"));
    this.childMenu.setStyle({
      "position":"absolute",
      "display":"none",
      "top":"0px",
      "left":"0px",
      "margin":"0px"
    });
    if(this.menu.childMenuClassName)
      this.childMenu.addClassName(this.menu.childMenuClassName);
    
    functionchildMenuMouseOver(e){
      vartarget=e.element();
      varrelatedTarget=e.relatedTarget||e.fromElement;
      if(!$(relatedTarget).descendantOf(self.childMenu)&&$(relatedTarget)!=self.childMenu){
        self.clearCloseTimeout();
      }
    }
    this.childMenu.observe("mouseover",childMenuMouseOver.bindAsEventListener());
    functionchildMenuMouseOut(e){
      vartarget=e.element();
      varrelatedTarget=e.relatedTarget||e.toElement;
      if(!$(relatedTarget).descendantOf(self.childMenu)&&$(relatedTarget)!=self.childMenu){
        //关闭所有的菜单
        vartemp=self;
        while(temp){
          temp.timeoutClose();
          temp=temp.parent;
        }
      }
    }
    this.childMenu.observe("mouseout",childMenuMouseOut.bindAsEventListener());
    
    $A(this.items).each(function(item,index){
      item.render();
      varli=$(document.createElement("li"));
      li.appendChild(item.element);
      self.childMenu.appendChild(li);
    });
    
    if(!this.items)
      return;
    document.body.appendChild(this.childMenu);
  },
  open:function(){
    this.clearCloseTimeout();
    if(this.childMenu)
      this.childMenu.show();
  },
  close:function(){
    if(this.childMenu)
      this.childMenu.hide();
  },
  closeAll:function(){
    this.close();
    if(!this.items)return;
    this.items.each(function(item){
      item.closeAll();
    });
  },
  clearCloseTimeout:function(){
    clearTimeout(this.closeTimeoutId);
    this.closeTimeoutId=null;
  },
  timeoutClose:function(){
    varself=this;
    this.clearCloseTimeout();
    this.closeTimeoutId=setTimeout(close,500);//这里不能直接用this.close或者self.close
    functionclose(){
      self.close();
    }
  }
});

使用方法

  functioncreateItemElement(text){
    vara=document.createElement("a");
    a.href="javascript:void(0);";
    vartextNode=document.createTextNode(text);
    a.appendChild(textNode);
    returna;
  }
  varmenu=newMenu("childMenu");
  //item1
  varitem1=newMenuItem($("item1"));
  menu.addItem(item1);
    varitem11=newMenuItem(createItemElement("item1-1"));
    item1.addItem(item11);
    varitem12=newMenuItem(createItemElement("item1-2"));
    item1.addItem(item12);
//    varimg=newImage();
//    img.src=http://tech.ddvip.com/2008-11/"botton_gif_080.gif";
//    vara=document.createElement("a");
//    a.href="javascript:void(0);";
//    a.appendChild(img);
    varitem13=newMenuItem(createItemElement("item1-3"));
    item1.addItem(item13);
      varitem131=newMenuItem(createItemElement("item1-3-1"));
      item13.addItem(item131);
        varitem1311=newMenuItem(createItemElement("item1-3-1-1"));
        item131.addItem(item1311);
      varitem132=newMenuItem(createItemElement("item1-3-2"));
      item13.addItem(item132);
    varitem14=newMenuItem(createItemElement("item1-4"));
    item1.addItem(item14);
      varitem141=newMenuItem(createItemElement("item1-4-1"));
      item14.addItem(item141);
        varitem1411=newMenuItem(createItemElement("item1-4-1-1"));
        item141.addItem(item1411);
      varitem142=newMenuItem(createItemElement("item1-4-2"));
      item14.addItem(item142);
  //item2
  varitem2=newMenuItem($("item2"));
  menu.addItem(item2);
  varitem21=newMenuItem(createItemElement("item2-1"));
  item2.addItem(item21);
  varitem22=newMenuItem(createItemElement("item2-2"));
  item2.addItem(item22);
  varitem23=newMenuItem(createItemElement("item2-3"));
  item2.addItem(item23);
  
  menu.render();

Tags:Javascript 多级 菜单

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接