您的位置:首页 > Web前端 > JavaScript

JavaScript 多级联动浮动(下拉)菜单 (第二版)javascript

2012-01-09 06:13 405 查看
上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高。
这次除了修改已发现的问题外,还对程序做了大幅调整和改进,使程序实用性更高,功能更强大。
效果预览
菜单使用演示:
-------------test-------------
位置:
第四个
第三个
第二个
第一个
1秒
0.5秒
0.2秒
不延时
仿京东商城商品分类菜单:
图片动画
图片效果
动画效果
系统其他
系统效果
其他效果
图片滑动切换效果
图片变换效果(ie only)
图片滑动展示效果
图片切割效果
tween算法及缓动效果
渐变效果
无刷新多文件上传系统
图片切割系统
拖放效果
拖拉缩放效果
滑动条效果
仿window xp右键菜单:
仿淘宝拼音索引菜单:
tag索引
table
fixed
color
date
select
table行定位效果
table排序
浮动定位提示效果
仿lightbox内容显示效果
颜色梯度和渐变效果
blog式日历控件
日期联动选择器
多级联动select
程序原理
程序最关键的地方是多级联动,先大概说明一下:
首先第一级的菜单元素整理好后,从他们开始,当某个菜单元素触发显示下级菜单时,
准备好下一级的容器元素,并把下一级的菜单元素放进去,再定位并显示容器元素。
里面的菜单元素又可以触发显示下级菜单,然后按上面的步骤执行下去。
这样一级一级的递推下去,形成多级的联动菜单。
程序说明
【容器对象】
在多级联动中,每一级都需要一个容器元素来存放菜单元素。
程序中每个容器元素都对应一个容器对象,用来记录该容器的相关信息。
容器对象的集合记录在程序的_containers属性中。
容器参数containers是程序实例化时的必要参数,它的结构如下:
[
容器元素(id),
{ id: 容器元素(id), menu: 插入菜单元素(id) },



]
首先如果containers不是数组的话,程序会自动转成单元素数组。
如果菜单插入的元素就是容器元素本身,可以直接用容器元素(id)作为数组元素。
否则应该使用一个对象结构,它包括一个id属性表示是容器元素(id)和一个menu属性表示菜单插入的元素(id)。
containers会在程序初始化时这样处理:




code
$$a.foreach($$a.isarray(containers) ? containers : [containers], function(o, i){
var pos, menu;
if ( o.id ) {
pos = o.id; menu = o.menu ? o.menu : pos;
} else {
pos = menu = o;
};
pos = $$(pos); menu = $$(menu);
pos && menu && this._inicontainer( i, { "pos": pos, "menu": menu } );
}, this);
主要是生成一个容器对象,其中pos属性是容器元素,menu属性是插入菜单的元素。
然后传递索引和容器对象给_inicontainer函数,对容器对象做初始化。
在_inicontainer中,首先用_resetcontainer重置容器对象可能在程序中设置过的属性。
再给容器元素添加事件:




code
$$e.addevent(ocontainer, "mouseover", $$f.bind(function(){ cleartimeout(this._timercontainer); }, this));
$$e.addevent(ocontainer, "mouseout", $$f.bindaseventlistener(function(e){
//先判断是否移出到所有容器之外
var elem = e.relatedtarget,
isout = $$a.every(this._containers, function(o){ returno.pos == elem || !($$d.contains(o.pos, elem)); });
if ( isout ) {
//清除定时器并隐藏
cleartimeout(this._timercontainer); cleartimeout(this._timermenu);
this._timercontainer = settimeout( $$f.bind( this.hide, this ), this.delay );
};
}, this));
在mouseout时,先判断是否容器内部或容器之间触发,不是的话再用定时器执行hide隐藏函数。
在hide里面,主要是隐藏容器:
this._foreachcontainer(function(o, i){
if ( i === 0 ) {
this._resetcss(o);
} else {
this._hidecontainer(o);
};
});
由于第一级容器一般是不自动隐藏的,只需要用_resetcss来重置样式。
其他容器会用_hidecontainer函数来处理隐藏:
$$d.setstyle( container.pos, { left: "-9999px", top: "-9999px", visibility: "hidden" } );
this._containers[container._index - 1]._active = null;
其中_active属性是保存该容器触发下级菜单的菜单对象,在隐藏容器同时重置上一级容器的_active。
在mouseover时清除容器定时器,其实就是取消hide执行。
之后是设置样式:
if ( index ) {
$$d.setstyle(container.pos, {
position: "absolute", display: "block", margin: 0,
zindex: this._containers[index - 1].pos.style.zindex + 1
});
};
除了第一级容器外,都设置浮动需要的样式。
最后用_index属性记录索引,方便调用,并把容器对象插入到容器集合中:
container._index = index;
this._containers[index] = container;
这个索引很重要,它决定了容器是用在第几级菜单。
【菜单对象】
容器元素插入了菜单元素才算一个菜单。
程序中每个菜单元素都对应一个菜单对象,用来记录该菜单的相关信息。
程序初始化前,应该先创建好自定义菜单集合,它的结构是这样的:
[
{ id: 1, parent: 0, html: 元素内容 },
{ id: 2, parent: 1, html: 元素内容 },



]
其中id是菜单的唯一标识,parent是父级菜单的id。
除了这两个关键属性外,还可以包括以下属性:
rank:排序属性
elem:自定义元素
tag:生成标签
css:默认样式
hover:触发菜单样式
active: 显示下级菜单时显示样式
html:菜单内容
relcontainer:是否相对容器定位(否则相对菜单)
relative:定位对象
attribute:自定义attribute属性
property:自定义property属性
其中relcontainer和relative是用于下级容器定位的。
自定义菜单集合会保存在_custommenu属性中。
在程序初始化时会执行_buildmenu程序,根据这个_custommenu生成程序需要的_menus菜单对象集合。
_buildmenu是比较关键的程序,菜单的层级结构就是在这里确定,它由以下几步组成:
第一步,清除旧菜单对象集合的dom元素。
这一步后面“内存泄漏”会详细说明。
第二步,生成菜单对象集合。
为了能更有效率地获取指定id的菜单对象,_menus是以id作为字典关键字的对象。
首先创建带根菜单(id为“0”)对象的_menus:
this._menus = { "0": { "_children": [] } };
然后整理_custommenu并插入到_menus中:




code
$$a.foreach(this._custommenu, function(o) {
var menu = $$.deepextend( $$.deepextend( {}, options ), o || {} );
if ( !!this._menus[ menu.id ] ) { return; };
menu._children = []; menu._index = -1;
this._menus[menu.id] = menu;
}, this);
其中菜单对象中包含对象属性,要用deepextend深度扩展来复制属性。
为确保id是唯一标识,会排除相同id的菜单,间接排除了id为“0”的菜单。
在重置_children(子菜单集合)和_index(联级级数)之后,就可以插入到_menus中了。
第三步,建立树形结构。
菜单之间的关系是一个树形结构,程序通过id和parent来建立这个关系的(写过数据库分级结构的话应该很熟悉)。
而第一版是把子类直接菜单写在菜单元素的menu属性中,形成类似多维数组的结构。
比较这两个方法,第一版的优势在于定义菜单时就直接确立了关系,而新版还必须根据id和parent来判断增加代码复杂度。
新版的优势是使用维护方便,灵活,级数越多就越体现出来,而第一版刚好相反。
能不能结合这两个方法的优势呢?
这里采用了一个折中的方法,在写自定义菜单对象时用的是新版的方法,然后程序初始化时把它转换成类多维数组结构。
转换过程是这样的:
首先根据parent找到父菜单对象:
var parent = this._menus[o.parent];
如果找不到父菜单对象或父菜单对象就是菜单对象本身的,当成一级菜单处理:
if ( !parent || parent === o ) { parent = menus[o.parent = "0"]; };
最后把当前菜单对象放到父菜单对象的_children集合中:
parent._children.push(o);
这就把_menus变成了类多维数组结构,而且这个结构不会发生死循环。
第四步,整理菜单对象集合。
这步主要是整理_menus里面的菜单对象。
首先,把自定义菜单元素放到碎片文档中:
!!o.elem && ( o.elem = $$(o.elem) ) && this._frag.appendchild(o.elem);
菜单元素是需要显示时才会处理的,这样可以防止在容器上出现未处理的菜单元素。
然后是修正样式(详细看样式设置部分)。
最后,对菜单对象的_children集合进行排序:
o._children.sort(function( x, y ) { return x.rank - y.rank || x.id - y.id; });
先按rank再按id排序,跟菜单对象定义的顺序是无关的。
执行完buildmenu程序之后,_menus菜单对象集合就建立好了。
麻烦的是在每次修改_custommenu之后,都必须执行一次_buildmenu程序。
【多级联动】
容器对象和菜单对象都准备好了,下面就是如何利用它们来做程序的核心——多级联动效果了。
多级联动包括以下步骤:
第一步,准备一级容器。
一级容器一般是显示状态的(也可以自己定义它的显示隐藏,像仿右键菜单那样)。
第二步,向容器插入菜单。
通过_insertmenu程序,可以向指定容器插入指定菜单,其中第一个参数是索引,第二个参数是父菜单id。
在_insertmenu程序里面,先判断是否同一个父级菜单,是的话就返回不用重复操作了:
var container = this._containers[index];
if ( container._parent === parent ) { return; };
container._parent = parent;
接着把原有容器内菜单移到碎片对象中:
$$a.foreach( container._menus, function(o) { o._elem && this._frag.appendchild(o._elem); }, this );
在第一版,菜单每次使用都会重新创建,新版改进后会把旧菜单元素保存到碎片对象中,要使用时再拿出来。
然后根据parent获取父菜单对象,并把父菜单的_children子菜单集合的插入到容器中:
$$a.foreach(this._menus[parent]._children, function( menu, i ){
this._checkmenu( menu, index );
container._menus.push(menu);
container.menu.appendchild(menu._elem);
}, this);
这样整个菜单就准备好了。
第三步,添加触发下级菜单事件。
上面在把菜单插入到容器之前,会先用_checkmenu程序检查菜单对象。
_checkmenu程序主要是检测和处理菜单元素。
首先判断没有自定义元素,没有的话就创建一个:
var elem = menu.elem;
if ( !elem ) { elem = document.createelement(menu.tag); elem.innerhtml = menu.html; };
第一版并不能自定义元素,但考虑到seo、渐进增强等,在新版加入了这个功能。
但每次buildmenu之后会把所有菜单元素包括自定义元素都清除,这个必须留意。
然后分别设置property、attribute和classname属性:
$$.extend( elem, menu.property );
var attribute = menu.attribute;
for (var att in attribute) { elem.setattribute( att, attribute[att] ); };
elem.classname = menu.css;
ps:关于property和attribute的区别请看这里的attribute/property部分
然后是关键的一步,添加hovermenu触发事件程序:
menu._event = $$f.bindaseventlistener( this._hovermenu, this, menu );
$$e.addevent( elem, "mouseover", menu._event );
处理后的元素会保存在菜单对象的_elem属性中。
第四步,触发显示下级菜单事件。
当触发了显示下级菜单事件,就会执行_hovermenu程序。
在_hovermenu程序里面,主要是做一些样式设置,详细参考后面的样式设置部分。
然后是用定时器准备执行_showmenu显示菜单程序。
第五步,整理菜单容器。
在_showmenu程序中,首先是隐藏不需要的容器:
this._foreachcontainer( function(o, i) { i > index && this._hidecontainer(o); } );
然后判断当前菜单是否有子菜单,当有子菜单时,先用_checkcontainer程序检查下级菜单容器。
_checkcontainer程序主要是检查容器是否存在,不存在的话就自动添加一个:
var pre = this._containers[index - 1].pos
,container = pre.parentnode.insertbefore( pre.clonenode(false), pre );
container.id = "";
其实就是用clonenode复制前一个容器,注意要重置id防止冲突。
虽然程序能自动创建菜单,但也要求至少自定义一个容器。
第六步,显示菜单容器。
在显示之前,先按第二步向容器插入菜单,最后就是执行_showcontainer程序来定位和显示容器了。
当下一个容器内的菜单触发显示下级菜单事件时,会显示下下级的菜单容器。
程序就是这样一级一级递推下去,形成多级联级效果。
【样式设置】
样式设置也是一个重要的部分,不是说要弄出多炫的界面,而是如何使程序能最大限度地灵活地实现那些界面。
菜单对象有三个样式相关的属性,分别是:
css:默认样式
hover:鼠标进入菜单时使用样式
active:显示下级菜单时使用样式
在_buildmenu程序中,会对这些样式属性进行整理:




code
if ( !!o.elem && o.elem.classname ) {
o.css = o.elem.classname;
} else if ( o.css === undefined ) { o.css = ""; };
if ( o.hover === undefined ) { o.hover = o.css; };
if ( o.active === undefined ) { o.active = o.hover; };
可以看到,程序会优先使用自定义元素的class,避免被程序设置的默认样式覆盖。
空字符串也可能被用来清空样式,所以要用undefined来判断是否自定义了样式。
程序中主要在两个地方设置样式:在鼠标移到菜单元素上时(_hovermenu)和显示下级菜单时(_showmenu)。
在_hovermenu程序中,先对每个显示的容器设置一次样式:
this._foreachcontainer(function(o, i){
if ( o.pos.visibility === "hidden" ) { return; };
this._resetcss(o);
var menu = o._active;
if ( menu ) { menu._elem.classname = menu.active; };
});
由于鼠标可能是在多个容器间移动,所以所有显示的容器都需要设置。
用_resetcss重置容器样式后再设置有下级菜单的菜单的样式为active。
为了方便获取,容器对象用一个_active属性来保存当前容器触发了下级菜单的菜单对象。
然后是设置鼠标所在菜单的样式:
if ( this._containers[menu._index]._active !== menu ) { elem.classname = menu.hover; };
为了优先设置active样式,在当前菜单不是容器的_active时才设置hover样式。
在_showmenu程序中,首先把显示下级菜单的菜单对象保存到容器的_active属性。
再用_resetcss重置当前容器样式,这个在同级菜单中移动时会有用。
然后再根据当前菜单是否有下级菜单来设置样式为active或hover。
【内存泄漏】
上面“菜单对象”中说到清除旧菜单对象的dom元素,这个主要是为了防止内存泄漏。
关于内存泄漏也有很多文章,这里推荐看看douglas crockford的“jscript memory leaks”和winter的“浏览器中的内存泄露”。
下面说说我解决本程序内存泄漏的经过:
首先,通过调用程序的add和delete数千次来测试是否有内存泄漏。
怎么看出来呢?可以找些相关的工具来检测,或者直接看任务管理器的页面文件(pf)使用记录。
结果发现,虽然每个元素都用removechild移出了dom,但随着循环的次数增多,pf还是稳步上升。
于是按照memory leaks中说的“we must null out all of its event handlers to break the cycles”去掉事件:
removeevent( elem, "mouseover", o._event );
效果是有了,但不太理想,然后再逐一排除,发现原来是_elem属性还关联着元素,结果经过一些操作后,又把元素append到dom上,还重新创建了一个元素。
于是在移除元素后,立即重置_elem和elem属性:
o._elem = o.elem = null;
内存泄漏就没有了,其实这里也不算是内存泄露了,而是程序设计有问题了。
所以清除dom元素时必须注意:
1,按照douglas crockford的建议,移除所有dom元素相关的事件函数;
2,删除/重置所有关联dom元素的js对象/属性。
【clonenode的bug】
在上面多级联动中说到,会用clonenode复制容器,但clonenode在ie中有一个bug:
在ie用attachevent给dom元素绑定事件,在clonenode之后会把事件也复制过去。
而用addeventlistener添加的事件就不会,可以在ie和ff测试下面的代码:




code
doctype html>
html>
body>
div id="t">div/div>
script>
var o = document.getelementbyid("t");
if(o.attachevent){
o.attachevent("onclick", function(){alert(2)});
}else{
o.addeventlistener("click", function(){alert(2)}, false);
}
document.body.appendchild(o.clonenode(true));
/script>
/body>
/html>
在ie和ff点击第一个div都会触发alert,关键是第二个div,在ff不会触发,而ie就会。
当然这个是不是bug还不清楚,或许attachevent本来就是这样设计的也说不定。
但第一版就是由于这个bug,而没有用clonenode。
在找解决方法之前,再扩展这个问题,看看直接添加onclick事件会不会有同样的bug。
首先测试在元素里面添加onclick:
doctype html>
html>
body>
div id="t" onclick="alert(1)">div/div>
script>
var o = document.getelementbyid("t");
document.body.appendchild(o.clonenode(true));
/script>
/body>
/html>
结果在ie和ff都会复制事件。
再测试在js添加onclick:




code
doctype html>
html>
body>
div id="t">div/div>
script>
var o = document.getelementbyid("t");
o.onclick = function(){alert(1)}
document.body.appendchild(o.clonenode(true));
/script>
/body>
/html>
结果在ie和ff都不会复制事件,看来只有attachevent会引起这个bug。
下面是解决方法:
用john resig在《精通javascript》推荐的dean edwards写的addevent和removeevent方法来添加/移除事件。
它的好处就不用说了,而且它能在ie解决上面说到的clonenode的bug。
因为它的实现原理是在ie用onclick来绑定事件,而上面的测试也证明用onclick绑定的事件是不会被clonenode复制的。
ps:我对原版的方法做了些修改,方便调用。
【浮动定位】
容器的浮动定位用的是浮动定位提示效果中的定位方法。
在该文章中已经详细说明了如何获取指定的浮动定位坐标,这里做一些补充。
一般来说用getboundingclientrect配合scrollleft/scrolltop就能获得对象相对文档的位置坐标。
测试下面代码:




code
doctype html>
html>
body style="padding:1000px 0;">
div id="t1" style="border:1px solid; width:100px; height:100px;">/div>
div id="t2">/div>
script>
var $$ = function (id) {
return "string" == typeof id ? document.getelementbyid(id) : id;
};
var b = 0;
window.onscroll=function(){
var t = $$("t1").getboundingclientrect().top + document.documentelement.scrolltop;
if( t != b ){ b = t; $$("t2").innerhtml += t + "
"; }
}
/script>
/body>
/html>
在除ie8外的浏览器,t会保持在一个固定值,但在ie8却会在1008和1009之间变换(用鼠标一格一格滚会比较明显)。
虽然多数时候还是标准的1008,但原来的效果可能就会被这1px的差距破坏(例如仿京东和仿淘宝的菜单)。
ps:chrome和safari要把documentelement换成body。
为了解决这个问题,只好在ie8的时候用回传统的offset来取值了(详细参考代码)。
至于造成这个问题的原因还没弄清楚,各位有什么相关资料的记得告诉我哦。
使用技巧
在仿京东商城商品分类菜单中,实现了一个阴影效果。
原理是这样的:
底部是一个灰色背景层(阴影),里面放内容层,然后设置内容层相对定位(position:relative),并做适当的偏移(left:-3px;top:-3px;)。
由于相对定位会保留占位空间,这样就能巧妙地做出了一个可自适应大小的背景层(阴影)。
ps:博客园首页也做了类似的效果,但貌似错位有些严重哦。
仿右键菜单效果并不支持opera,因为opera并没有类似oncontextmenu这样的事件,要实现的话会很麻烦。
ps:如果想兼容opera的话,可以看看这篇文章“opera下自定义右键菜单的研究”。
注意,在oncontextmenu事件中要用阻止默认事件(preventdefault)来取消默认菜单的显示。
这个效果还做了一个不能选择的处理,就是拖动它的内容时不会被选择。
在ff中把样式-moz-user-select设为none就可以了,而ie、chrome和safari通过在onselectstart返回false来实现相同的效果。
ps:css3有user-select样式,但貌似还没有浏览器支持。
当然,还有很多不完善的地方,这里只是做个参考例子,就不深究了。
仿淘宝拼音索引菜单主要体现了active的用法和相对容器定位,难的地方还是在样式(具体参考代码)。
ps:这几个例子都只是二级菜单,其实可以自己用更简单的方法实现。
使用说明
实例化时,第一个必要参数是自定义容器对象:
new fixedmenu("idcontainer");
第二个可选参数用来设置系统的默认属性,包括
属性:默认值//说明
menu:[],//自定义菜单集合
delay:200,//延迟值(微秒)
tag:"div",//默认生成标签
css:undefined,//默认样式
hover:undefined,//触发菜单样式
active:undefined,//显示下级菜单时显示样式
html:"",//菜单内容
relcontainer: false,//是否相对容器定位(否则相对菜单)
relative:{ align: "clientleft", valign: "bottom" },//定位对象
attribute:{},//自定义attribute属性
property:{},//自定义property属性
onbeforeshow: function(){}//菜单显示时执行
其中包括菜单对象的默认属性。
还提供了以下方法:
hide:隐藏菜单,隐藏所有菜单容器;
add:添加菜单,参数是菜单对象或菜单对象集合;
edit:修改菜单,找出对应id的菜单对象修改属性设置;
del:删除菜单,参数是要删除菜单对象的id。
其中后面三个编辑方法都会执行ini初始化程序,效率较低,一般来说尽量不要使用。
完整实例下载

======================================================

在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定
这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐