popupmenu-style.js

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

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



var m_doc;


/**
 *加载样式
 */
function loadPopupMenuStyle(styleFile) {
	var strXMLFile = styleFile;
	m_doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
	m_doc.async = false;
	m_doc.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_doc.selectSingleNode(strPath) ) {
		var nodeList = m_doc.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_doc.selectSingleNode(strPath) ) {
		var nodeList = m_doc.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_doc.selectSingleNode("//popupmenu/style/main-menu/menu-item/split-image") ) {
		var node = m_doc.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_doc.selectSingleNode("//popupmenu/style/sub-menu/menu-item/split-line") ) {
		var node = m_doc.selectSingleNode("//popupmenu/style/sub-menu/menu-item/split-line");
		m_strSMItemBorderB = "border-bottom:" + node.text + ";";
	}

}//end function getSubMenuStyle()