menu.js

一个纯手工编写的javascript菜单控件.

//菜单管理类
function MenuConfig(name,obj){
	this.name=name;
	this.win=obj;
	this.root=obj.document;
	this.menus = new Array();
	this.menuId=name;
	this.MouseOnIndex=0;
	this.menuPanelStyle="width:0;border-style:outset;border-width:2 2 2 2;"
	this.menuItemStyle_Normal="vertical-align:middle;cursor:default;height:19;font-size:13px;width:auto;";
	this.menuItemStyle_MouseOver="vertical-align:middle;cursor:default;height:19;color:#FFFFFF;font-size:13px;width:auto;background-color:#335EA8;";
	this.menuItemStyle_Line="cursor:default;height:19;padding:0;margin:0;";
	this.menuStyle_Normal="float:left;padding:3 14;height:16;border:1px solid #F2F1F3;";
	this.menuStyle_MouseOver="float:left;padding:3 14;height:16;color:#FFFFFF;background-color:#335EA8;border:1px solid #F2F1F3;";
	this.menuStyle_MouseClick="float:left;padding:3 14;height:16;color:#FFFFFF;background-color:#335EA8;border:1px solid #F2F1F3;";
	this.menuTitleStyle="background-color:#F2F1F3;cursor:default;width:100%;height:25;border-style:outset;border-width:0 0 1 0;";
	this.popupsList=new Array();
	this.subMenuList=new Array();
	this.menuList=new Array();
	this.init();
}

MenuConfig.prototype.init=function(){
	var div = this.root.createElement("DIV");
	this.root.body.style.cssText="font-size:12px;margin:0;padding:0;";
	var html="<div id='"+this.menuId+"' style='"+this.menuTitleStyle+"'><span id='test'><span>"+
		"</div>";
	div.innerHTML=html;
	this.root.body.appendChild(div);
}

//显示菜单
MenuConfig.prototype.showMenu=function(left,top,index){
	var popupObj = this.popupsList[index];
	popupObj.popup.show(left,top,popupObj.width,popupObj.height,this.root.body);
	this.resetStyle_menuPanel(popupObj.popup.document.body.childNodes[0]);
}

//关闭菜单
MenuConfig.prototype.closeMenu=function(){
	for(var i=0;i<this.popupsList.length;i++){
			this.popupsList[i].popup.hide();
	}
	this.resetStyle_menu();
}

//显示子菜单
MenuConfig.prototype.showSubMenu=function(index,top){
	var popupObj = this.subMenuList[index];
	var left=popupObj.parent.width;
	var height=popupObj.height;
	var width=popupObj.width;
	popupObj.popup.show(left-5,top,width,height,popupObj.parent.popup.document.body);
	this.resetStyle_menuPanel(popupObj.popup.document.body.childNodes[0]);
}

//还原所有菜单项样式
MenuConfig.prototype.resetStyle_menuPanel=function(panel){
	for(var i=0;i<panel.childNodes.length;i++){
		if(panel.childNodes[i].childNodes[0].tagName!="HR"){
			panel.childNodes[i].style.cssText=this.menuItemStyle_Normal;
			panel.childNodes[i].childNodes[0].style.color="#000000";
		}else{
			panel.childNodes[i].style.cssText=this.menuItemStyle_Line;
		}
	}
}

//当鼠标悬浮时改变菜单项样式
MenuConfig.prototype.changeStyleOver_menuItem=function(obj){
	if(obj.index==null){
		for(var i = this.MouseOnIndex;i<this.subMenuList.length;i++){
			this.subMenuList[i].popup.hide();
		}
	}
	obj.childNodes[0].style.color="#FFFFFF";
	obj.style.cssText=this.menuItemStyle_MouseOver;
}

//当鼠标离开时改变菜单项样式
MenuConfig.prototype.changeStyleOut_menuItem=function(obj){
	if(obj.index==this.MouseOnIndex){
		for(var i =obj.index;i<this.subMenuList.length;i++){
			this.subMenuList[i].popup.hide();
		}
	}
	obj.childNodes[0].style.color="#000000";
	obj.style.cssText=this.menuItemStyle_Normal;
}

//当鼠标悬浮时改变菜单样式
MenuConfig.prototype.changeStyleOver_menu=function(obj){
	for(var i=0;i<this.popupsList.length;i++){
		if(this.popupsList[i].popup.isOpen){
			obj.click();
			obj.style.cssText=this.menuStyle_MouseClick;
			return;
		}
	}
	obj.focus();
	var order = this;
	obj.onfocusout=function(){
		order.resetStyle_menu();
	};
	obj.style.cssText=this.menuStyle_MouseOver;
}

//当鼠标离开时改变菜单样式
MenuConfig.prototype.changeStyleOut_menu=function(obj){
	for(var i=0;i<this.popupsList.length;i++){
		if(this.popupsList[i].popup.isOpen){
			break;
		}
	}
	if(i>=this.popupsList.length){
		obj.style.cssText=this.menuStyle_Normal;
	}
}

//当鼠标点击时改变菜单样式
MenuConfig.prototype.changeStyleClick_menu=function(obj){
	this.resetStyle_menu();
	if(this.popupsList[obj.index].popup.isOpen){
		obj.style.cssText=this.menuStyle_Normal;
	}else{
		obj.style.cssText=this.menuStyle_MouseClick;
	}
}

//还原所有菜单样式
MenuConfig.prototype.resetStyle_menu=function(){
	for(var i=0;i<this.menuList.length;i++){
		this.menuList[i].style.cssText=this.menuStyle_Normal;
	}
}

//初始化一级菜单
MenuConfig.prototype.initFirstMenu=function(menu){
	var popup=window.createPopup();
	var popBody = popup.document.body;
	var panel = popup.document.createElement("div");
	panel.style.cssText=this.menuPanelStyle;
	var panelIndex=this.subMenuList.length;
	var popupObj = {
		popup:popup,
		top:0,
		width:0,
		height:0,
		left:0,
		parent:null
	};

	for(var i=0;i<menu.body.items.length;i++){
		var miTemp = menu.body.items[i];
		var item = popup.document.createElement("div");
		item.setAttribute("order",this);
		var image="&nbsp;";
		if(miTemp.icon!=null&&miTemp.icon!="")
			image="<img width=15 height=15 src='"+miTemp.icon+"' />";
		item.verticalAlign="middle";

		if(miTemp instanceof SubItem){
			item.style.cssText=this.menuItemStyle_Normal;
			item.innerHTML="<table style='table-layout:fixed;border:none;padding:0;margin:0;table-spacing:0;border-collapse:collapse;font-size:12px;'><tr>"+
				"<td width=15>"+image+"</td>"+
				"<td width='100%'>"+miTemp.title+"</td>"+
				"<td width=15>>></td></tr><table>";
			if(parseInt(panel.style.width)<miTemp.title.length*16+50){
				panel.style.width=miTemp.title.length*16+50;
				popupObj.width=miTemp.title.length*16+50;
			}
			item.index=this.subMenuList.length;
			item.onmouseout=function(){this.getAttribute('order').changeStyleOut_menuItem(this)};
			item.onmouseover=new Function("this.getAttribute('order').MouseOnIndex="+panelIndex+";this.getAttribute('order').changeStyleOver_menuItem(this);this.getAttribute('order').showSubMenu("+item.index+","+popupObj.height+");");
			this.createPopupMenu(miTemp,popupObj);
		}else if(miTemp.title=="-"){
			var hr = popup.document.createElement("hr");
			item.appendChild(hr);
			item.style.cssText=this.menuItemStyle_Line;
		}else{
			item.style.cssText=this.menuItemStyle_Normal;
			item.onmouseover=function(){this.getAttribute("order").MouseOnIndex=panelIndex;this.getAttribute('order').changeStyleOver_menuItem(this);};
			item.innerHTML="<table style='table-layout:fixed;border:none;padding:0;margin:0;table-spacing:0;border-collapse:collapse;font-size:12px;'><tr>"+
				"<td width=15>"+image+"</td>"+
				"<td width='100%'>"+miTemp.title+"</td>"+
				"<td width=15> </td></tr><table>";
			if(parseInt(panel.style.width)<miTemp.title.length*16+50){
				panel.style.width=miTemp.title.length*16+50;
				popupObj.width=miTemp.title.length*16+50;
			}
			item.onmouseout=function(){this.getAttribute('order').changeStyleOut_menuItem(this)};
			item.onclick=new Function("this.getAttribute('order').win.execScript("+miTemp.method+");this.getAttribute('order').closeMenu()");
		}
		popupObj.height+=parseInt(item.style.height);
		panel.appendChild(item);
	}
	popupObj.height+=2*parseInt(panel.style.borderWidth);
	popBody.appendChild(panel);
	this.popupsList.push(popupObj);
}

//初始化弹出子菜单
MenuConfig.prototype.createPopupMenu=function(sub,pop){
	var popup=pop.popup.document.parentWindow.createPopup();
	var popBody = popup.document.body;
	var panel = popup.document.createElement("div");
	panel.style.cssText=this.menuPanelStyle;
	var popShowTop=0;
	var popupObj = {
		popup:popup,
		top:0,
		width:0,
		height:0,
		left:0,
		parent:pop
	};
	this.subMenuList.push(popupObj);
	var panelIndex=this.subMenuList.length;

	for(var i=0;i<sub.items.length;i++){
		var miTemp = sub.items[i];
		var item = popup.document.createElement("div");
		item.setAttribute("order",this);
		var image="&nbsp;";
		if(miTemp.icon!=null&&miTemp.icon!="")
			image="<img width=15 height=15 src='"+miTemp.icon+"' />";
		item.verticalAlign="middle";
		if(miTemp instanceof SubItem){
			item.style.cssText=this.menuItemStyle_Normal;
			item.innerHTML="<table style='table-layout:fixed;border:none;padding:0;margin:0;table-spacing:0;border-collapse:collapse;font-size:12px;'><tr>"+
				"<td width=15>"+image+"</td>"+
				"<td width='100%'>"+miTemp.title+"</td>"+
				"<td width=12>>></td></tr><table>";
			if(parseInt(panel.style.width)<miTemp.title.length*16+50){
				panel.style.width=miTemp.title.length*16+50;
				popupObj.width=miTemp.title.length*16+50;
			}
			item.index=this.subMenuList.length;
			item.onmouseout=function(){this.getAttribute('order').changeStyleOut_menuItem(this)};
			item.onmouseover=new Function("this.getAttribute('order').MouseOnIndex="+panelIndex+";this.getAttribute('order').changeStyleOver_menuItem(this);this.getAttribute('order').showSubMenu("+item.index+","+popupObj.height+");");
			popupObj.height+=parseInt(item.style.height);
			panel.appendChild(item);
			this.createPopupMenu(miTemp,popupObj);
		}else if(miTemp.title=="-"){
			var hr = popup.document.createElement("hr");
			item.appendChild(hr);
			item.style.cssText=this.menuItemStyle_Line;
			popupObj.height+=parseInt(item.style.height);
			panel.appendChild(item);
		}else{
			item.style.cssText=this.menuItemStyle_Normal;
			item.innerHTML="<table style='table-layout:fixed;border:none;padding:0;margin:0;table-spacing:0;border-collapse:collapse;font-size:12px;'><tr>"+
				"<td width=15>"+image+"</td>"+
				"<td width='100%'>"+miTemp.title+"</td>"+
				"<td width=12> </td></tr><table>";
			if(parseInt(panel.style.width)<miTemp.title.length*16+50){
				panel.style.width=miTemp.title.length*16+50;
				popupObj.width=miTemp.title.length*16+50;
			}
			item.onclick=new Function("this.getAttribute('order').win.execScript("+miTemp.method+");this.getAttribute('order').closeMenu()");
			popupObj.height+=parseInt(item.style.height);
			item.onmouseover=function(){this.getAttribute("order").MouseOnIndex=panelIndex;this.getAttribute('order').changeStyleOver_menuItem(this);};
			item.onmouseout=function(){this.getAttribute('order').changeStyleOut_menuItem(this)};
			panel.appendChild(item);
		}
	}

	popupObj.height+=2*parseInt(panel.style.borderWidth);
	popBody.appendChild(panel);
}
//增加主菜单
MenuConfig.prototype.addMenu=function(menu){
	var mnu = this.root.createElement("span");
	mnu.style.cssText=this.menuStyle_Normal;
	mnu.verticalAlign="middle";
	mnu.innerHTML=menu.title;
	this.root.getElementById(this.menuId).appendChild(mnu);
	mnu.setAttribute("order",this);
	mnu.onclick=new Function("this.getAttribute('order').changeStyleClick_menu(this);this.getAttribute('order').showMenu("+mnu.offsetLeft+","+mnu.offsetHeight+","+this.menuList.length+");");
	mnu.onmouseover=function(){this.getAttribute('order').changeStyleOver_menu(this);};
	mnu.onmouseout=function(){this.getAttribute('order').changeStyleOut_menu(this);};
	mnu.index=this.menuList.length;
	this.menuList.push(mnu);
	this.initFirstMenu(menu);
}

//菜单项
function Menu(title){
	this.title=title;
	this.body=new SubItem(title);
}

//添加一个菜单项
Menu.prototype.addItem=function(title,method,icon){
	var item = title;
	if(method!=null||title=="-"){
		item={
			title:new String(title),
			method:method,
			icon:icon
		};
	}
	menu.add(item);
}

Menu.prototype.createBody=function(){
	return this.body;
}

//拥有子菜单的菜单项
function SubItem(title,icon){
	this.title=title;
	this.icon=icon;
	this.items=new Array();
}

//增加子菜单项
SubItem.prototype.add=function(title,method,icon){
	var item = title;
	if(method!=null||title=="-"){
		item={
			title:new String(title),
			method:method,
			icon:icon
		};
	}
	this.items.push(item);
}