改造自AOL的JS单级菜单,含源代码

你一定会惊叹与老外写的代码,真是又漂亮有简洁,短短不过几十行代码,就写除了这个功能齐全,简洁漂亮的菜单。不过它的是用JQUERY写的,我改造了一下,是之不依赖于任何框架。

查看完全效果
查看AOL官方效果
下载源代码
2009-05-08_105246
以下是JS代码:

//

function XMenu(panelId){
var panel = XU.$(panelId);
var o = this;
XU.each(panel.getElementsByTagName('li'), function(e){
if(XU.hasClass(e, 'nav_item')){
e.onmouseover = function(event){
if(o.last){
XU.removeClass(o.last, 'dd_open')
}
if(e.showtimer){
o.killTimer(e);
}
XU.addClass(e, 'dd_open');
o.last = e;
}
e.onmouseout = function(event){
o.startTimer(e);
}
}
});
}

XMenu.prototype = {
startTimer : function (obj){
var o = this;
obj.showtimer = setTimeout(function(){
o.killTimer(obj);
XU.removeClass(obj, 'dd_open')
}, 250);
},
killTimer : function (obj){
if(obj.showtimer){
clearInterval(obj.showtimer);
obj.showtimer = null
}
}
}

XU = {
$ : function (id){
return document.getElementById(id);
}
,each : function(s, f, bind){
if(typeof(bind) == 'undefined'){
bind = false;
}

for(var i=0; i<s.length; i++){
var e = s[i];
if(bind){
f.apply(e);
}else{
f(e);
}
}
}

,hasClass : function(e, className){
var reg = new RegExp('\\b' + className + '\\b', 'i');
return reg.test(e.className);
}
,addClass : function(e, className){
if(!XU.hasClass(e, className)){
e.className += " " + className;
}
}
,removeClass : function(e, className){
var reg = new RegExp('\\b' + className + '\\b', 'ig');
e.className = e.className.replace(reg, '');
}
}

One Reply to “改造自AOL的JS单级菜单,含源代码”

发表评论

电子邮件地址不会被公开。

*