javascript的弹出式菜单：ITPlusMenu v1.0.0.1

把在一个项目里写的JS弹出式菜单提取了出来，因为觉得以后还可以重用。

 

名字规则依旧：ITPlusMenu，当前是初始版本：1.0.0.1

 

不是网络上很常见的那种树形的多级菜单，而是一个相对简单的导航菜单

 

主要特点有：

 

1）松耦合式的封装，因此有很大的灵活性

2）开发时手边的浏览器较全，在IE7/8、FF、Opera 10.63上经测试均可正常使用

3）。。。自己感觉很顺手

 

先来个仿Opera的效果图：

 

 

调用示例：

 

第1个菜单项

第2个菜单项

第3个菜单项

第4个菜单项

第1个菜单项的内容

第2个菜单项的内容

第3个菜单项的内容

第4个菜单项的内容

 

 

 菜单文件源码（ITPlusMenu.js）：

 

/** * ITPlusMenu导航菜单库 * Author : Z,MingYu (netwild) 网无忌 * Date : 2010-11-20 0:57 * ver : 1.0.0.1 * Email : [email protected] * QQ : 52100641 */ function ITPlusMenu(cfg){ var _self = this; var region = cfg.region ? cfg.region : "bottom" ; var padding = cfg.padding ? cfg.padding : 0; var interval = cfg.interval ? cfg.interval : 500; var menu = cfg.menu; var menuTimer = null; var x,y,menuW,menuH,contentW,contentH,showX,showY,objMenu,objContent; this.init = function(){ for(var menuItem in menu){ _self.addEvent(menuItem,menu[menuItem]); objMenu = $(menuItem); objContent = $(menu[menuItem]); menuW = objMenu.offsetWidth; menuH = objMenu.offsetHeight; contentW = objContent.offsetWidth; contentH = objContent.offsetHeight; x = objMenu.offsetLeft; y = objMenu.offsetTop; while(objMenu = objMenu.offsetParent){ x += objMenu.offsetLeft; y += objMenu.offsetTop; } if(region == "left" || region == "l"){ showX = x - contentW - padding ; showY = y;} if(region == "top" || region == "t"){ showX = x ; showY = y - contentH - padding;} if(region == "right" || region == "r"){ showX = x + menuW + padding ; showY = y;} if(region == "bottom" || region == "b"){ showX = x ; showY = y + menuH + padding;} objContent.style.left = showX + "px"; objContent.style.top = showY + "px"; } } this.addEvent = function(menuId,menuContentId){ $(menuId).onmouseover = function(){ _self.showMenu(menuId,menuContentId);} $(menuContentId).onmouseover = function(){ _self.showMenu(menuId,menuContentId);} $(menuId).onmouseout = function(){ _self.hideMenu(menuId,menuContentId);} $(menuContentId).onmouseout = function(){ _self.hideMenu(menuId,menuContentId);} } this.showMenu = function(menuId,menuContentId){ clearTimeout(menuTimer); for(var menuItem in menu){ $(menu[menuItem]).style.visibility = (menuItem == menuId ? "visible" : "hidden"); } } this.hideMenu = function(menuId,menuContentId){ menuTimer = setTimeout("$('"+menuContentId+"').style.visibility = 'hidden'",interval); } }