快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

小金体育官网充值_酒文化网进入



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

一、开篇

不停都苦于找不到相宜的菜单,近来自己做了一个,感到劳绩不小,拿出来分享。先看效果:

二、道理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);

对付这样一种标签的嵌套关系,对ul注册mouseover和mouseout事故,鼠标从ul外貌移入到最里小金体育官网充值面的a上面,会呈现什么环境?

谜底是会呈现三次mouseover和两次mouseout,虽然没有直接给li和a注册事故,然则因为事故的冒泡,也会被ul注册的mouseover和mouseout事故相应。这样一来,整过历程便是这样的:

在IE中

order

type

srcElement

fromElement

toElement

1

mouseover

ul

其他

ul

2

mouseout

ul

ul

li

3

mouseover

li

ul

li

4

mouseout

li

li

a

5

mouseover

a

li

a

在DOM中

order

type

target

relatedTarget

1

mouseover

ul

其他

2

mouseout

ul

li

3

mouseover

li

ul

4

mouseout

li

a

5

mouseover

a

li

假如我想在移入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、简单菜单

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

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

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

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

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

3、多级菜单的逻辑

在途中,对付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(!$(relatedTa小金体育官网充值rget).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="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.add小金体育官网充值Item(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();

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: