menu.htc

Windows Web脚本开发指南/(美) Dan Heflin, Todd Ney著 的源码

<PUBLIC:COMPONENT >
<PUBLIC:PROPERTY Name="backgroundColor" InternalName="menuBackColor" />
<PUBLIC:PROPERTY Name="childMenuWidth" InternalName="menuChildWidth" />
<PUBLIC:PROPERTY Name="color" InternalName="menuColor" />
<PUBLIC:PROPERTY Name="disabledBackgroundColor" Internalname="menuDisabledBackColor" />
<PUBLIC:PROPERTY Name="disabledColor" Internalname="menuDisabledColor" />
<PUBLIC:PROPERTY Name="fontFamily InternalName="menuFontFamily" />
<PUBLIC:PROPERTY Name="fontSize" InternalName="menuFontSize" />
<PUBLIC:PROPERTY Name="menuHeight" />
<PUBLIC:PROPERTY Name="menuTop" />
<PUBLIC:PROPERTY Name="menuWidth" />
<PUBLIC:PROPERTY Name="parentMenuWidth" InternalName="menuParentWidth" />
<PUBLIC:PROPERTY Name="selectBackgroundColor" InternalName="menuHighlightBackColor" />
<PUBLIC:PROPERTY Name="selectColor" InternalName="menuHightlightColor" />
<PUBLIC:PROPERTY Name="seperatorColor" InternalName="menuSeperatorColor" />
<PUBLIC:PROPERTY Name="xmlFilePath" />
<PUBLIC:METHOD Name="disableMenu" />
<PUBLIC:METHOD Name="enableMenu" />
<PUBLIC:EVENT Name="onMenuClick" ID="menuClick" />

<PUBLIC:ATTACH EVENT="ondocumentready"  ONEVENT="setup()" />
<PUBLIC:ATTACH EVENT="onclick"  for="element" ONEVENT="handleClick()" />
<PUBLIC:ATTACH EVENT="onmouseover"  for="element" ONEVENT="handleOver()" />
<PUBLIC:ATTACH EVENT="onmouseout" for="element" ONEVENT="handleOut()" />
<PUBLIC:ATTACH EVENT="onlosecapture" for="element" ONEVENT="closeCapture()" />


<script language="JavaScript">
xmlFilePath = "menu.xml";
var activeSubMenu = null;
var activeMenu = null;
var menuContainer;
menuHeight = 20;
menuWidth = "document.body.clientWidth";
menuTop = 0;
var menuParentWidth = 90;
var menuChildWidth = 120;
var menuFontSize = "12pt";
var menuFontFamily = "Arial";
var menuBackColor = "lightblue";
var menuColor = "black";
var menuHighlightBackColor = "#1E90FF";
var menuHightlightColor = "white";
var menuSeperatorColor = "white";
var menuDisabledBackColor = "lightblue";
var menuDisabledColor = "#778899";

function handleClick(){
  var newElement;
  var source = event.srcElement;
  var menuState;
  
  //Check to see which menu item was selected
  switch(source.type){
    case "parentMenu":
      //check to see if a menu is all ready displayed
      if (activeMenu != event.srcElement){
        if (menuContainer != null){
          removeSubMenu();
        }
	//create and set the location of the submenu item container
        menuContainer = document.createElement("DIV");
        with (menuContainer.style){
          position = "absolute";
          left = source.style.left;
          top = menuTop + menuHeight;
          borderTop = "1px solid " + menuSeperatorColor;
        }
        this.appendChild(menuContainer);
        var subItems = xmlSource.selectNodes("//menuItem[@value='" + source.id + "']/menuItem");
		var xmlElement = subItems.nextNode();

	//loop through and build menu items
        while (xmlElement != null){
          menuState = xmlElement.getAttribute("state");
          newElement = document.createElement("<DIV>");
          with (newElement.style){
            width = menuChildWidth;
            overflow = "hidden";
            if (menuState == "disabled"){
              backgroundColor = menuDisabledBackColor;
              color = menuDisabledColor;
            }
            else {
              backgroundColor = menuBackColor;
              color = menuColor;
            }
            fontSize = menuFontSize;
            fontFamily = menuFontFamily;
            height = menuHeight;
          }
          with (newElement){
            innerHTML = xmlElement.getAttribute("display");  
            id = xmlElement.getAttribute("value");
          }
          newElement.type = "subMenu";
          newElement.state = menuState;
          menuContainer.appendChild(newElement);
          xmlElement = subItems.nextNode();
        }
        this.setCapture(true);
        activeMenu = source;
      }
      //second click on the parent menu (remove child menu)     
      else { 
        activeMenu = null;
        this.removeChild(menuContainer);
        menuContainer = null; 
      }
      break;

    //click on sub menu means item was selected
    case "subMenu":
      if (source.state != "disabled"){  
        var eventObject = createEventObject();
        eventObject.menuValue = source.id;
        menuClick.fire(eventObject);
        this.releaseCapture();
      }
      break;

    //click somewhere elese in the document
    default:
      this.releaseCapture();
      break;
  }
}
function removeSubMenu(){
  this.removeChild(menuContainer);  
  menuContainer = null;
  activeSubMenu = null;
}

function handleOver(){
  //function changes the backgound color when the mouse is over a menu item
  var source = event.srcElement;
  switch(source.type){
    case "parentMenu":
      break;
    case "subMenu":
      if (activeSubMenu != source){
        if (activeSubMenu != null){
          activeSubMenu.style.backgroundColor = menuBackColor;
          activeSubMenu.style.color = menuColor;
        }
        if (source.state != "disabled"){
          source.style.backgroundColor = menuHighlightBackColor;
          source.style.color = menuHightlightColor; 
          activeSubMenu = source;
        }
        else
          activeSubMenu = null;
      }
      break;
  }
}
function handleOut(){
  //function changes the backgound color back to normal when the mouse is leaves a menu item
  var source = event.srcElement;
  switch(source.type){
    case "parentMenu":
       break;
    case "subMenu":
      if (source.state != "disabled"){
        source.style.backgroundColor = menuBackColor;
        source.style.color = menuColor;
      }
      activeSubMenu = null;
      break;
  }
}

function closeCapture(){
  if (menuContainer != null){
    removeSubMenu();
  }
  activeMenu = null;
}
function setup(){
  //Sets up the html elements, loads the menu xml file, and builds top level menu items
  this.innerHTML = "<DIV id='menu' type='menuBar' style='background:" + menuBackColor + ";overflow:hidden;position:absolute;left:0;height:" + menuHeight + ";top:" + menuTop + ";cursor:default;'></DIV><xml id='xmlSource'></xml>";

  xmlSource.async = false;
  xmlSource.load(xmlFilePath);  

  var parentMenuItems = xmlSource.documentElement.selectNodes("menuItem");
  var xmlElement = parentMenuItems.nextNode();
  var leftPos = 10;
  var newElement;
     
  while (xmlElement != null){
    newElement = document.createElement("DIV");
    //cannot be inside of with because this is a user defined attribute
    newElement.type = "parentMenu";
    with (newElement){
      innerHTML = xmlElement.getAttribute("display");
      id =  xmlElement.getAttribute("value");
    }
    with (newElement.style){
      position = "absolute";
      fontSize = menuFontSize;
      fontFamily = menuFontFamily;
      color = menuColor;
      width= menuParentWidth;
      display="inline";
      left=leftPos;
      overflow = "hidden";
    }
    menu.appendChild(newElement); 
    leftPos += menuParentWidth;
    xmlElement = parentMenuItems.nextNode();  
  }
  menu.style.setExpression("width", menuWidth);
}
function enableMenu(menuValue){
  setMenuState(menuValue, "enabled");
}
function disableMenu(menuValue){
  setMenuState(menuValue, "disabled");
}
function setMenuState(menuValue, state){
  var xmlElement = xmlSource.selectSingleNode("//menuItem[@value='" + menuValue + "']");
  if (xmlElement != null)
    xmlElement.setAttribute("state", state);
  else {
    var newErrorObj = new Error("100", "Menu item does not exist.");  
    throw newErrorObj;
  }
}
</script>
</component>