popupmenu-script.js

菜单实现的主要技术为Javascript, DOM, XML 不会被任何标签覆盖

/**
 *使用window.createPopup()制作的无限级(出于效率考虑，目前限制为10级)菜单，该菜单不会被任何东西遮住，而且可以跨框架
 *菜单共有两个js文件，popupmenu-script.js和popupmenu-loadxml.js，以及一个存储样式的xml文件：popupmenu-style.xml
 *该文件名为popupmenu-script.js，是制作菜单的主要脚本。
 *作者：tiannet(曾次清)
 *时间：2006年06月15日
 */

var resourceDir = "";
var contextPath;	//虚拟目录别名(与jsp中的contextPath意义相同)

var menuItemVSSubItems= new Array();//存储一个菜单项对应的所有子菜单项
var aPopupWindows = new Array();//Popup窗口组
var mapIdVSItemInfos = new Array();//以id作为key，parentId作为value的集合
var ALLOWED_DEGREE = 10;//允许得菜单等级
var mapIdVSItemsHtml = new Array();//菜单id与子菜单显示的html内容的对应关系（如果有子菜单的话）
var rootMenuId = -1;//根菜单ID
var isFirstWriteMenu = true;//是否第一次输出菜单

// -------- 主菜单样式相关定义 ---------//

//定义主菜单样式
var m_strMainMenuStyle = "";
//主菜单项的样式attribute
var m_strMainMenuItemStyle = "";
//主菜单项样式Property
var m_strMMItemProBase = {};
//主菜单项鼠标悬停样式Property
var m_strMMItemProMOver = {};
//菜单项与项之间的分割图片
var m_strMMItemSplitImg;

// -------- 子菜单样式相关定义 ---------//

//定义子菜单样式
var m_strSubMenuStyle = "";
//子菜单项的样式attribute
var m_strSubMenuItemStyle = "";
//子菜单项样式Property
var m_strSMItemProBase = {};
//子菜单项鼠标悬停样式Property
var m_strSMItemProMOver = {};
//子菜单项下边框样式(作为分割线)
var m_strSMItemBorderB = "";

// -------- end 菜单样式相关的变量定义 ---------//


//构造函数
//@param dir 资源文件所在目录（指图标所在目录等）
//@param style 样式文件xml
function PopupMenu(dir,style) {
	resourceDir = dir;
	this.resourceDir = resourceDir;
	if( style && style != "" ) {
		this.styleFile = style;
	}
}

PopupMenu.prototype.styleFile = "popupmenu-style.xml";

//设置虚拟目录的别名
//如果设置了该参数，则在打开菜单链接时会在指定的链接前加上该参数。不过以http开头的链接除外
PopupMenu.prototype.setContextPath = function( path ) {
	contextPath = path;
}

// ------------------------------ begin 用户可调函数得编写 -------------------------------------//
//添加菜单项：add
//得到主菜单项：getMainItems
//得到一个菜单项的下属子菜单：getItems

//添加一个菜单项
//@param id 菜单id，确保唯一。
//@param parentId 父菜单id。
//@param text 菜单文本
//@param action 菜单执行的动作，可以是一个链接地址，也可以是一段脚本或一个函数。
//@param target 执行菜单动作的目标，如果是执行一段javascript，请传入js或javascript
//@param icon 菜单前显示的图标
PopupMenu.prototype.add = function(id, parentId, text, action, target, icon) {
	
	var a = {
			"id"		:	id,
			"parentId"	:	parentId,
			"icon"		:	icon,
			"text"		:	text,
			"action"	:	action,
			"target"	:	target
		};
	if( !icon || icon == "" ) {
		a.icon = null;
	}
	if( a.icon && a.icon != null && resourceDir && resourceDir != "" ) {
		a.icon = resourceDir + a.icon;
	}
	a.degree = null;
	a.fromIds = null;
	//id 与菜单项数据的对应关系
	mapIdVSItemInfos[id] =  a;

	//将子菜单加入到对应的父菜单记录中
	if( !menuItemVSSubItems[parentId] ) {
		menuItemVSSubItems[parentId] = new Array();
	}
	menuItemVSSubItems[parentId].push( a );
	return;

}//end method add

//从xml中加载菜单数据，并且调用add方法添加
PopupMenu.prototype.loadDataFromXml = function( strDataFile ) {
	//如果数据件指定的不是绝对路径，则加上资源目录
	if( strDataFile.substring(0,1) != "/" && this.resourceDir && this.resourceDir != "" ) {
		strDataFile = this.resourceDir + strDataFile;
	}
	var aData = getMenuData( strDataFile );
	for( var i = 0;i < aData.length;i ++ ) {
		this.add( aData[i].id,  aData[i].parentId,  aData[i].text, aData[i].action, aData[i].target, aData[i].icon);
	}
}

//输出菜单
PopupMenu.prototype.write = function(rootId) {
	if(typeof(rootId) == "undefined") {
		rootId = rootMenuId;
	}
	//输出主菜单
	document.write(this.getHtml(rootId));

}

//得到输出菜单的HTML代码
PopupMenu.prototype.getHtml = function(rootId) {
	if(typeof(rootId) == "undefined") {
		rootId = rootMenuId;
	}
	rootMenuId = rootId;
	if( !isFirstWriteMenu ) {
		//将所有菜单数据的等级和历经的菜单ID设为null
		for( var id in mapIdVSItemInfos ) {
			mapIdVSItemInfos[id].degree = null;
			mapIdVSItemInfos[id].fromIds = null;
			mapIdVSItemInfos[id].preObj = null;
		}
		//将菜单ID与其子菜单HTML对应关系清空
		mapIdVSItemsHtml.length = 0;
		//清空popup窗口
		aPopupWindows.length = 0;
		prevMainMenuItemObj = null;
	}
	isFirstWriteMenu = false;///调用了该方法意味着不是第一次输出菜单
	
	//加载菜单样式
	var styleFile = this.styleFile;
	//如果样式文件指定的不是绝对路径，则加上资源目录
	if( styleFile.substring(0,1) != "/" && this.resourceDir && this.resourceDir != "" ) {
		styleFile = this.resourceDir + styleFile;
	}
	//alert(styleFile);
	loadPopupMenuStyle( styleFile );

	//输出主菜单
	return mainItemsToHtml( getItems(rootId) );
}

//得到指定菜单项的子菜单数据
PopupMenu.prototype.getSubData = function(id) {
	return getItems(id);
}

// ------------------------------ end 用户可调函数得编写 -------------------------------------//

//根据菜单标识得到它下属的子菜单数据，如果没有，则返回false
function getItems ( id ) {
	if( !hasChildren( id ) ) {
		return false;
	}
	return menuItemVSSubItems[id];
}


//得到用于显示一个菜单项下属的子菜单项的窗口
//@param degree 菜单项的等级（主菜单下的视为一级）
function getPopup( degree ) {
	if( !aPopupWindows[degree] ) {
		aPopupWindows[degree] = aPopupWindows[degree - 1].document.parentWindow.createPopup();
	}
	return aPopupWindows[degree];
}

//得到菜单等级
//@param menuId 菜单ID
function getMenuDegree(menuId) {
	if(mapIdVSItemInfos[menuId].degree == null) {
		countMenuDegree(menuId);
	}
	return mapIdVSItemInfos[menuId].degree;

}//end getMenuDegree

//得到菜单所经历的菜单等级
//@param menuId 菜单ID
function getMenuFromIds( menuId) {
	if(mapIdVSItemInfos[menuId].fromIds == null) {
		countMenuDegree(menuId);
	}
	return mapIdVSItemInfos[menuId].fromIds;

}//end getMenuFromIds

//计算菜单等级以及所经历的菜单
//@param menuId 菜单ID
function countMenuDegree(menuId) {
	var parentId = mapIdVSItemInfos[menuId].parentId;
	var nextId = parentId;
	var degree = 0;//菜单项的等级
	var aFromIds = new Array();
	//aFromIds.push( parentId );
	while( nextId != rootMenuId && degree <= ALLOWED_DEGREE ) {
		aFromIds.push( parentId );
		parentId = mapIdVSItemInfos[nextId].parentId;
		nextId = parentId;
		degree ++;
	}
	mapIdVSItemInfos[menuId].degree = degree;
	mapIdVSItemInfos[menuId].fromIds = aFromIds;
}


//隐藏从指定id(菜单项)所在窗口所创建的所有窗口
function hideAllParentPopup( id ) {
	var degree = getMenuDegree(id);
	//隐藏该级的弹出窗口即可
	if( aPopupWindows[degree] ) {
		aPopupWindows[degree].hide();
	}

}

// ------------------------------ end 菜单项数据处理函数 -------------------------------------//

// ------------------------------ 将菜单数据转换为html代码的函数 -------------------------------------//
///////////////////////////////////////////////////////////////////////////////////////////////////////

//将主菜单项变为html代码
//@param items 菜单项数据，如果未传递则使用全局的mainItems
//同时创建以菜单id为索引的Popup窗口
function mainItemsToHtml (items) {
	var aHtml = new Array();
	aHtml.push( "<table  unselectable='on' style='"+m_strMainMenuStyle+"'>");
	aHtml.push( "<tr>" );
	for( var i = 0;i < items.length;i ++ ) {
		aHtml.push ( "<td align=center unselectable='on'>" );
		aHtml.push ( "<div style='width:100%;' unselectable='on' id=\"" + items[i].id + "\" " );
		aHtml.push ( "	style='" + m_strMainMenuItemStyle + "' " );
		aHtml.push ( "	onmouseover=mainMenuOverStyle(\"" + items[i].id + "\",this);" );
		aHtml.push ( "showItemsOfMain(\"" + items[i].id + "\");" );
		aHtml.push ( "	onmouseout=mainMenuOutStyle(\"" + items[i].id + "\",this); " );
		//aHtml.push(" onclick=execute(\"" + items[i].id + "\"); ");
		aHtml.push(" onclick=showItemsOfMain(\"" + items[i].id + "\"); ");
		aHtml.push ( ">" + items[i].text + "</div> " );
		aHtml.push ( "</td>" );
		//如果用户设置了分割图片则输出
		if( m_strMMItemSplitImg && m_strMMItemSplitImg != "" ){
			aHtml.push ( "<td style='" + m_strMMItemSplitImg + "' width=2></td>" );
		}
	}
	aHtml.push ( "</tr></table>" );
	//创建一级popup窗口
	aPopupWindows[0] = window.createPopup();
	return aHtml.join("");


}

//得到菜单的下属子菜单HTML代码
function getSubItemsHtml(menuId) {
	if(typeof(mapIdVSItemsHtml[menuId]) == "undefined") {
		var aItems = menuItemVSSubItems[menuId];
		var aHtml = new Array();
		aHtml.push("<table cellspacing='0' cellpadding='0' unselectable='on' style='" + m_strSubMenuStyle + "'>");
		for( var i = 0;i < aItems.length;i ++ ) {
			aHtml.push( itemToHtml( aItems[i] ) );	
		}
		aHtml.push( "</table>" );
		mapIdVSItemsHtml[menuId] = aHtml.join("");
	}
	return mapIdVSItemsHtml[menuId];
}


//将一个菜单项(非主菜单项)变为html代码，以<tr>开头，</tr>结尾
function itemToHtml(aItemData) {
	//是否包含子菜单
	var blnHasChildren = hasChildren( aItemData.id );
	//菜单所在等级
	var degree = getMenuDegree(aItemData.id);
	//var blnHasChildren,degree;
	var parents = "";
	for( var i = 0;i < degree;i ++ ) {
		parents += "parent.";
	}

	var aHtml = new Array();
	
	aHtml.push( "<tr unselectable='on' ");
	aHtml.push(" style='" + m_strSubMenuItemStyle + "' ");//菜单项的样式
	
	aHtml.push(" onmouseover=" + parents + "showItems(this,\"" + aItemData.id + "\");");
	aHtml.push(parents + "subMenuOverStyle(\"" + aItemData.id + "\",this); ");
	aHtml.push(" onmouseout=" + parents + "subMenuOutStyle(\"" + aItemData.id + "\",this); ");
	aHtml.push(" onclick=" + parents + "execute(\"" + aItemData.id + "\"); ");
	aHtml.push( ">" );//tr结束的符号
	//图标列