icopopmenu_newstructure.htc

HTC,demo WEB用于。 超大型

<public:component name="PopMenu" urn="PopMenu">
<public:property name="xmlSource" put="putXMLSource" get="getXMLSource"/>
<public:property name="captionPropName" put="putCaptionPropName" get="getCaptionPropName"/>
<public:property name="hasGrid" value="false"/>
<public:property name="x"/>
<public:property name="y"/>
<public:property name="vIcoWidth" value="18"/>
<public:property name="vIcoHeight" value="18"/>
<public:property name="bindDynMenuOpen" put="putBindDynMenuOpen"/>
<public:property name="init" put="initialize"/>
<public:method name="popUp"/>
<public:method name="closeAllMenu"/>
<public:method name="addDynMenu"/>
<public:event name="onDynMenuOpen" id="evtDynMenuOpen"/>
<public:attach event="onmousedown" onevent="downElement()"/>
<public:attach event="onclick" onevent="clickElement()"/>

<script language="JavaScript">

////////////////////////////////////////////////////////
///弹出式菜单 popUp menu
////////////////////////////////////////////////////////

<!--
var objXMLDoc,objXMLDocSource,vXSLT,vIcoXSLT,objDynMenuXML; //菜单的XML、专门存动态菜单的xml以及XSL
var arrMenu = new Array(); //记录每一层的当前激活菜单
var arrMenuItem = new Array(); //记录每一层的当前激活菜单项
var vOpenTimer; //打开子菜单的定时器
var vCloseTimer1; //关闭子菜单的定时器(如果是无子菜单的菜单项，则关闭前一次的清除并开始自己的清除)
var vCloseTimer2; //关闭子菜单的定时器(留下自己的直接子菜单的删除，用于打开了多层子菜单后移回自己时)
var vCloseTimer3; //关闭子菜单的定时器(移出打开了自己子菜单的菜单项后要删除自己的子菜单)
var vCloseDepth; //记录关闭菜单时的层次
var objScrollMenu; //因长度过长而要滚动的菜单
var vScrollTimer; //滚动的定时器
var objOpenSubMenuItem; //记录将要延时打开子菜单的菜单项(arrMenuItem中记录的是已经打开子菜单的菜单项)
var objCloseSubMenuItem; //记录将要延时关闭子菜单的菜单项
var objShadow; //记录菜单阴影
var objLeftIcoContainsDiv;//菜单图标的容器Div

var objSelectBgDiv;//菜单条onmouseover的时候出现的前景div
var arrSelectBgDiv = new Array();   //各级菜单上选中的标记


var vClickNum = 0; //记录不离开element范围之内的onmousedown element的次数
var vScrollHeight = 15; //子菜单的高度
var vCaptionPropName = null;

function putXMLSource(argSource){
	objXMLDocSource = inputXML(argSource);
	if(objXMLDocSource != null){
		objXMLDoc = formatXMLSource(objXMLDocSource,captionPropName); //预格式化Pop Menu的xml source
		objXMLDoc = inputXML("<?xsml version='1.0' encoding='gb2312'?><root>" + objXMLDoc + "</root>");
	}
}

function getXMLSource(){
	return objXMLDocSource;
}

function putCaptionPropName(argCaptionPropName){ //创建组成菜单项
	vCaptionPropName = linkPropName(argCaptionPropName);
}

function getCaptionPropName(){
	return vCaptionPropName;
}

function putBindDynMenuOpen(argHandle){
    element.onDynMenuOpen = argHandle;
}

function clickDocument(){	
	if (element.contains(window.event.srcElement)) return;
	//closeAllMenu(); //关闭所有菜单
}

function clickElement(){ //onclick在叶子菜单上后菜单关闭	
	var objSrc = window.event.srcElement;
	
	////////////////////////////
	if(objSrc.getAttribute("enable") == "false") return;
	///////////////////////////////////

	if(objSrc.__hasSubMenu || objSrc.dynchild || objSrc.scopeName == "v") return; //对于有子菜单项的菜单、动态菜单和菜单中的vml图形(分割线或者小箭头)
	closeAllMenu(); //关闭所有菜单
}

function downElement(){ //开始截获document的onmouse事件,在此事件触发后会取消掉,保证只有打开了菜单后才开始截获而如果未对菜单动作则不截获,提高效率
	if(vClickNum == 0){
		window.document.attachEvent("onmousedown",clickDocument);
		vClickNum = 1;
	}
}

function closeAllMenu(){ //关闭所有菜单
	closeMenu(0);
	element.style.zIndex = 0;
	window.document.detachEvent("onmousedown",clickDocument);
	vClickNum = 0;
}

function overSubMenu(){ //子菜单项的onmouseover

	var vDepth;
	var objSrc;
	window.clearTimeout(vOpenTimer); //防止某个尚未打开的菜单打开

	window.event.cancelBubble = true;
	vDepth = parseInt(this.depth);
	objSrc = checkMenuItem(window.event.srcElement,this);
	if(!objSrc) return;

	window.clearTimeout(vCloseTimer1);
	window.clearTimeout(vCloseTimer3);
	/*
	if(objSelectBgDiv){
	    window.status = "vDepth:" + vDepth + "     objSelectBgDiv.depth:" + objSelectBgDiv.depth;
	}
*/
	if(arrMenuItem[vDepth] != objSrc){ //如果当前菜单项不是打开子菜单的项
		unselectMenuItem(arrMenuItem[vDepth]);
		//////////////////////////////
		if(objSrc.getAttribute("enable") != "false"){//如果该菜单不是可操作菜单
			selectMenuItem(objSrc);
		}
		if(objSrc.__hasSubMenu || objSrc.dynchild){ //如果当前项可以有子菜单或者是动态菜单则关闭前一个子菜单并打开自己的子菜单
			objOpenSubMenuItem = objSrc;
			vOpenTimer = window.setTimeout(openSubMenu,200);
		}
		else if(arrMenu[vDepth]){ //如果是无子菜单的菜单项，则关闭前一次的清除
			vCloseDepth = vDepth;
			vCloseTimer1 = window.setTimeout(closeSubMenu,200);
		}
	}
	else if(arrMenu[vDepth + 1]){ //如果当前菜单项是打开子菜单的项且有孙菜单
		vCloseDepth = vDepth + 1;
		vCloseTimer2 = window.setTimeout(closeSubMenu,200); //并只留下自己的子菜单
	}
}

function outSubMenu(){ //子菜单项的onmouseout
	var vDepth;
	
	objSrc = checkMenuItem(window.event.srcElement,this);
	if(!objSrc) return;
	vDepth = parseInt(this.depth);

	if(objSrc == arrMenuItem[vDepth]){ //从当前菜单项移出
		if(!objSrc.contains(window.event.toElement)){ //判断是否移动到了菜单的外部而不是在菜单内部的元素之间移动导致的out事件
			vCloseDepth = vDepth;
			vCloseTimer3 = window.setTimeout(closeSubMenu,500); //关闭已经打开的同级菜单项的子菜单
		}
	}
	else{
		unselectMenuItem(objSrc);
		if(arrMenu[vDepth]) selectMenuItem(arrMenuItem[vDepth]); //让出现子菜单的菜单项高亮
	}
}

function downSubMenu(){
	
}

function openSubMenu(){ //专用于子菜单项延时打开其菜单
  if(objOpenSubMenuItem.parentElement && objOpenSubMenuItem.parentElement.depth){  
    closeMenu(objOpenSubMenuItem.parentElement.depth);
  }
//debugger;
  if(objOpenSubMenuItem.dynchild){ //动态菜单:1.添加请等待... 2.放出事件让外部处理函数知道
    //因为先处理的dynchild，所以即使动态菜单还含有一些子菜单也将会进入这里处理
    addWaitMenu(objOpenSubMenuItem);
	vOpenTimer = window.setTimeout(fireDynMenuOpenEvent,300);
  }
  else addSubMenu(objOpenSubMenuItem);
}

function fireDynMenuOpenEvent(){
  var objEvent = createEventObject();  
  objEvent.menuItem = objOpenSubMenuItem;
  evtDynMenuOpen.fire(objEvent);
  //
 //addDynMenu(objOpenSubMenuItem,objNodeList);
}

function closeSubMenu(){ //专用于子菜单项延时关闭其菜单
	closeMenu(vCloseDepth);
}

function addDynMenu(argMenuItem,argXML){ //加入动态子菜单,argXML接受两层格式的xml字符串或DOM、Node对象
  var objXML,collNodes;
  var vMenuXML; //子菜单的xml

  if(!element.contains(argMenuItem)){
    alert("argMenuItem对象错误,不包含在当前容器内！");
	return;
  }
  if(!argXML){
    addNoItemMenu(argMenuItem); //"无子项"菜单
	return;
  }
  
  //格式化动态菜单xml为标准菜单 可接受的xml格式
  if(typeof(argXML) == "string"){
    objDynMenuXML = inputXML(argXML);
	objXML = objDynMenuXML;
  }
  else if(typeof(argXML) == "object") objXML = argXML;
  vMenuXML = formatXMLSource(objXML,captionPropName);

  //格式化动态菜单xml为标准菜单 可接受的xml格式
  if(argMenuItem.__hasSubMenu){ //说明除了动态子项还有静态菜单子项
    objXML = objXMLDoc.selectSingleNode("//*[@__mid='" + argMenuItem.__mid + "']");
	if(objXML) vMenuXML = formatXMLSource(objXML,captionPropName) + vMenuXML;
  }

  if(vMenuXML){
    objDynMenuXML = inputXML("<?xsml version='1.0' encoding='gb2312'?><root>" + vMenuXML + "</root>");
	closeDynMenu(argMenuItem);
    addSubMenu(argMenuItem);
  }
  else addNoItemMenu(argMenuItem); //"无子项"菜单
}

function addWaitMenu(argMenuItem){ //加入请等待子菜单
  closeDynMenu(argMenuItem);
  objDynMenuXML = inputXML("<?xsml version='1.0' encoding='gb2312'?><root><r __mid='__wait' __caption='请稍等...'></r></root>");
  addSubMenu(argMenuItem);
}

function addNoItemMenu(argMenuItem){ //加入无子项菜单
  closeDynMenu(argMenuItem);
  objDynMenuXML = inputXML("<?xsml version='1.0' encoding='gb2312'?><root><r __mid='__noitem' __caption='没有下级菜单'></r></root>");
  addSubMenu(argMenuItem);
}

function closeDynMenu(argMenuItem){ //关闭动态子菜单,防止"wait"、"noitem"或正常的动态子菜单之间无法关闭对方
	var objMenu;
	var vDepth;

	vDepth = argMenuItem.parentElement.depth;
	objMenu = arrMenu[vDepth];
	if (!objMenu) return;

	objMenu.parentElement.removeNode(true); //remove the menu Panel

	arrMenu[vDepth] = null;
	arrMenuItem[vDepth] = null;
}

function addSubMenu(argMenuItem){ //添加给定菜单项的下级子菜单,argXML为相应的菜单xml

	var objMenuPanel,objParentPanel,objMenu,objArrow;
	var vInnerHTML;
	var vIcoDivInnerHTML;
	var vDepth;
	var vDivCount;
	var oActionDiv;
//debugger;
	if(argMenuItem == element){ //在popUp方法中调用,目的是初始化第一级菜单
		vDepth = 0;
		objParentPanel = element;
		vInnerHTML = objXMLDoc.childNodes(0).transformNode(inputXML(vXSLT).childNodes(0));
		vIcoDivInnerHTML = objXMLDoc.childNodes(0).transformNode(inputXML(vIcoXSLT).childNodes(0)); 
	}
	else{
	  if(objOpenSubMenuItem.parentElement && objOpenSubMenuItem.parentElement.depth){  
	    vDepth = parseInt(argMenuItem.parentElement.depth);
        objParentPanel = argMenuItem.parentElement.parentElement;
      }
      
	  if(argMenuItem.dynchild){ //动态菜单
		
	    vInnerHTML = objDynMenuXML.childNodes(0).transformNode(inputXML(vXSLT).childNodes(0));
	  }
	  else{ //非动态菜单
	    if(objXMLDoc.selectSingleNode("//*[@__mid='" + argMenuItem.__mid + "']")){	  
		    vInnerHTML = objXMLDoc.selectSingleNode("//*[@__mid='" + argMenuItem.__mid + "']").transformNode(inputXML(vXSLT).childNodes(0));
		    vIcoDivInnerHTML = objXMLDoc.selectSingleNode("//*[@__mid='" + argMenuItem.__mid + "']").transformNode(inputXML(vIcoXSLT).childNodes(0));
		}
	  }
	}
	
	vDivCount = element.document.all.tags("DIV").length;//DIV对象个数
	//if(objOpenSubMenuItem)
	/*
	while(arrSelectBgDiv.length> parseInt(vDepth)){//将所有下级菜单缓存清空
	    arrSelectBgDiv.pop();
	}
	*/
	for(var i=0;i<vDivCount;i++){
	    oActionDiv = element.document.all.tags("DIV")[i];
	    if(oActionDiv.depth && (parseInt(oActionDiv.depth) >parseInt(vDepth))){
	        element.removeChild(oActionDiv);
	    }
	}
	
	createSelectBgDiv(vDepth);//创建该级菜单上的选择前景
	
	//add menu panel
	objMenuPanel = element.document.createElement("<div class='phms_ipm_menupanel'></div>");
	if(objParentPanel){
	    objMenuPanel = objParentPanel.appendChild(objMenuPanel );
	}
	
	//add menu
	objMenu = element.document.createElement("<div class='phms_ipm_submenu' depth='" + (vDepth + 1) + "'></div>");
	if(objMenuPanel){
	    objMenu = objMenuPanel.appendChild(objMenu);
	}

	//add objLeftIcoContainsDiv
	objLeftIcoContainsDiv = element.document.createElement("<div class='phms_ipm_icoContainsDiv'>");
	if(objMenuPanel){
	    objLeftIcoContainsDiv = objMenuPanel.appendChild(objLeftIcoContainsDiv);
    }
	
	//add menu shadow
	
	objShadow = element.document.createElement("<div class='phms_ipm_shadow'></div>");
	if(objMenuPanel){
	    objShadow = objMenuPanel.appendChild(objShadow);
	}
	
	with(objMenu){
		onmouseover = overSubMenu;
		onmouseout = outSubMenu;
		onmousedown = downSubMenu;
		innerHTML = vInnerHTML; //add menu item
	}
	
	objLeftIcoContainsDiv.innerHTML = vIcoDivInnerHTML;

	arrMenu[vDepth] = objMenu;
	arrMenuItem[vDepth] = argMenuItem;

	
	locateMenu(vDepth); //见下
	
	if(objMenu.offsetHeight > 2){//菜单消失时objMenu.offsetHeight将为0
	    with(objLeftIcoContainsDiv.style){
	        height = objMenu.offsetHeight - 2;
	        left = 1 ;
	        top = 1;
	        visibility = "visible";
	    }
	}
	

}

function locateMenu(argDepth){//定位菜单,此处argDepth是添加子菜单的项的depth
	var vTemp,objTemp;