popupmenu-loadxml.js

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

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


// -------------------------------------- 读取菜单样式的相关处理 --------------------------------------------------//
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var m_docStyle;

/**
 *加载样式
 */
function loadPopupMenuStyle(strXMLFile) {
	m_docStyle = new ActiveXObject("MSXML2.DOMDocument.3.0");
	m_docStyle.async = false;
	m_docStyle.load(strXMLFile);

	
	getMainMenuStyle();
	getSubMenuStyle();

	
}


/**
 *鼠标移入移出主菜单样式的改变
 *@param obj - 改变样式的对象
 *@param bolChg - 是否改变样式
 */
function chgMainMenuStyle(obj,bolChg)
{
	if ( bolChg ) {//鼠标悬停改变颜色
		for( var pro in m_strMMItemProMOver ) {
			obj.style[pro] = m_strMMItemProMOver[pro];
		}
	} else {//鼠标移出
		//obj.style.border = "0";
		for( var pro in m_strMMItemProBase ) {
			obj.style[pro] = m_strMMItemProBase[pro];
		}
	}
}//end function chgMainMenuStyle(obj,i)

/**
 *鼠标移入移出子菜单样式的改变
 *@param obj - 改变样式的对象
 *@param bolChg - 是否改变样式
 */
function chgSubMenuStyle(obj,bolChg) {
	if ( bolChg ) {//鼠标悬停改变颜色
		for( var pro in m_strSMItemProMOver ) {
			obj.style[pro] = m_strSMItemProMOver[pro];
		}
	} else {//鼠标移出
		for( var pro in m_strSMItemProBase ) {
			obj.style[pro] = m_strSMItemProBase[pro];
		}
	}
}//end function chgSubMenuStyle(obj,i)


/**
 *构造节点样式
 *@param strPath 节点路径
 */
function getNodeStyle(strPath) {
	var strStyle = "";
	if( m_docStyle.selectSingleNode(strPath) ) {
		var nodeList = m_docStyle.selectSingleNode(strPath).childNodes;
		for( var i = 0;i < nodeList.length;i ++ ) {
			var nodeName = nodeList[i].nodeName;
			var nodeText = nodeList[i].text;
			//如果设置的样式为背景图片，则构造背景的绝对路径
			if( nodeName.toLowerCase() == "background-image" ) {
				nodeText = "url(" + resourceDir +  nodeText + ")";
				
			}
			strStyle += nodeName.toLowerCase() + ":" + nodeText + ";";
		}
	}
	return strStyle;
}
/**
 *构造节点Style Property
 */
function getNodeProperty(strPath) {
	var arrProperty = {};
	if( m_docStyle.selectSingleNode(strPath) ) {
		var nodeList = m_docStyle.selectSingleNode(strPath).childNodes;
		for( var i = 0;i < nodeList.length;i ++ ) {
			var nodeName = nodeList[i].nodeName;
			nodeName = nodeName.toLowerCase();
			var nodeText = nodeList[i].text;
			//如果设置的样式为背景图片，则构造背景的绝对路径
			if( nodeName.toLowerCase() == "background-image" ) {
				nodeText = "url(" + resourceDir +  nodeText + ")";
				
			}
			//由attribute到property的转变。如background-color -> backgroundColor
			var aName = nodeName.split("-");
			var strProperty = aName[0];
			for( var j = 1;j < aName.length;j ++ ) {
				strProperty += aName[j].substring(0,1).toUpperCase() + aName[j].substr(1);
			}
			arrProperty[strProperty] = nodeText;
		}
	}
	return arrProperty;
}

/**
 *得到主菜单样式
 */
function getMainMenuStyle() {

	//得到主菜单样式
	m_strMainMenuStyle = getNodeStyle("//popupmenu/style/main-menu/base");
	//得到主菜单项样式
	m_strMainMenuItemStyle = getNodeStyle("//popupmenu/style/main-menu/menu-item/base");

	//主菜单项的property
	m_strMMItemProBase = getNodeProperty("//popupmenu/style/main-menu/menu-item/base");

	//得到鼠标悬停时主菜单项各property改变
	m_strMMItemProMOver = getNodeProperty("//popupmenu/style/main-menu/menu-item/mouse-over");

	//得到菜单项与项之间的分割图片
	if( m_docStyle.selectSingleNode("//popupmenu/style/main-menu/menu-item/split-image") ) {
		var node = m_docStyle.selectSingleNode("//popupmenu/style/main-menu/menu-item/split-image");
		
		m_strMMItemSplitImg = "background-image:url(" + resourceDir + node.text + ");";
		
		m_strMMItemSplitImg += "background-repeat:no-repeat;background-position:center center;";
		//alert(m_strMMItemSplitImg);
	}
	

}//end function getMainMenuStyle()

/**
 *得到主菜单样式
 */
function getSubMenuStyle() {

	//得到子菜单样式
	m_strSubMenuStyle = getNodeStyle("//popupmenu/style/sub-menu/base");
	//得到子菜单项样式
	m_strSubMenuItemStyle = getNodeStyle("//popupmenu/style/sub-menu/menu-item/base");

	//子菜单项的property
	m_strSMItemProBase = getNodeProperty("//popupmenu/style/sub-menu/menu-item/base");

	//得到鼠标悬停时子菜单项各property改变
	m_strSMItemProMOver = getNodeProperty("//popupmenu/style/sub-menu/menu-item/mouse-over");

	//得到子菜单项下边框样式(作为分割线)
	if( m_docStyle.selectSingleNode("//popupmenu/style/sub-menu/menu-item/split-line") ) {
		var node = m_docStyle.selectSingleNode("//popupmenu/style/sub-menu/menu-item/split-line");
		m_strSMItemBorderB = "border-bottom:" + node.text + ";";
	}

}//end function getSubMenuStyle()

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// -------------------------------------- end 读取菜单样式的相关处理 --------------------------------------------------//

// -------------------------------------- 读取菜单数据的相关处理 --------------------------------------------------//
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//得到一个接点的菜单数据信息，返回的为一个数组，
//该数组包含的元素有：a.text,a.action,a.target,a.icon
function getNodeDataInfo( objNode ) {
	if( !objNode ) {
		return null;
	}
	var a = new Array();
	var attList = objNode.attributes;
	a.text = attList.getNamedItem("text").text;
	a.action = "";
	a.target = "_self";
	a.icon = "";
	if( attList.getNamedItem("action") ) {
		a.action = attList.getNamedItem("action").text;
	}
	if( attList.getNamedItem("target") ) {
		a.target = attList.getNamedItem("target").text;
	}
	if( attList.getNamedItem("icon") ) {
		a.icon = attList.getNamedItem("icon").text;
	}
	return a;

}//end function getNodeDataInfo( objNode ) 

//递归读取子接点数据
function selectChildrens(aData, objNode, parentId) {
	var chindNodes = objNode.childNodes;
	for( var j = 0;j < chindNodes.length;j ++ ) {
		objNode = chindNodes[j];
		var id = parentId + "_" + j;
		var aInfo = getNodeDataInfo( objNode );
		aInfo.id = id;
		aInfo.parentId = parentId;
		aData.push( aInfo );
		if( objNode.hasChildNodes() ) {
			selectChildrens( aData, objNode, id );
		}
	}
}

//得到存储在xml文件中的菜单数据
//返回是一个二维数组，每个一维数组包含一条菜单信息
//返回的数据格式如同：a[i].id,a[i].parentId,a[i].text,a[i].action,a[i].target,a[i].icon
function getMenuData( strDataFile ) {
	var aData = new Array();
	var docData =  new ActiveXObject("MSXML2.DOMDocument.3.0");
	docData.async = false;
	docData.load( strDataFile );
	//得到主菜单所有节点
	var mainMenuNodes = docData.selectSingleNode("//popupmenu/menus").childNodes;
	for( var i = 0;i < mainMenuNodes.length;i ++ ) {
		var id = i;
		var parentId = rootMenuId;
		var objNode = mainMenuNodes[i];
		var aInfo = getNodeDataInfo( objNode );
		aInfo.id = id;
		aInfo.parentId = parentId;
		aData.push( aInfo );
		//如果有子菜单
		if( objNode.hasChildNodes() ) {
			selectChildrens( aData, objNode, id );
		}


	}//end for
	return aData;

}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// -------------------------------------- end 读取菜单数据的相关处理 --------------------------------------------------//