spmenu.js

一种Portal的实现源码

//------------------------------------------------------//
// Solution Partner's ASP.NET Hierarchical Menu Control //
// Copyright (c) 2002-2003                              //
// Jon Henning - Solution Partner's Inc                 //  
// [e-mail]   -   http://www.solpart.com    //
// Compatible Menu Version: 1.1.0.0+										//
// Script Version: 1101																  //
//------------------------------------------------------//

var m_oSolpartMenu = new Array(); //stores all menu objects (SolpartMenu) in array 
function spm_initMyMenu(oXML, oCtl)   //Creates SolpartMenu object and calls generate method
{
  m_oSolpartMenu[oCtl.id] = new SolpartMenu(oCtl);
  m_oSolpartMenu[oCtl.id].GenerateMenuHTML(oXML);
}
  
//------- Constructor -------//
function SolpartMenu(o)
{
__db(o.id + ' - constructor');
//  var me = this;  //allow attached events to reference this
  //--- Data Properties ---//
  this.systemImagesPath = spm_getAttr(o, 'SystemImagesPath', '');  
  this.iconImagesPath = spm_getAttr(o, 'IconImagesPath', this.systemImagesPath);
  this.xml = spm_getAttr(o, 'XML', '');
  this.xmlFileName = spm_getAttr(o, 'XMLFileName', '');

  //--- Appearance Properties ---//
  this.fontStyle=spm_getAttr(o, 'FontStyle', 'font-family: arial;');
  this.backColor=spm_getAttr(o, 'BackColor');  
  this.foreColor=spm_getAttr(o, 'ForeColor');
  this.iconBackColor=spm_getAttr(o, 'IconBackgroundColor');
  this.hlColor=spm_getAttr(o, 'HlColor', '');
  this.shColor=spm_getAttr(o, 'ShColor', ''); 
  this.selColor=spm_getAttr(o, 'SelColor');
  this.selForeColor=spm_getAttr(o, 'SelForeColor');
  this.selBorderColor=spm_getAttr(o, 'SelBorderColor');
  this.menuAlignment = spm_getAttr(o, 'MenuAlignment', 'Left');
  this.display=spm_getAttr(o, 'Display', 'horizontal');
  this.MBLeftHTML=spm_getAttr(o, 'MBLHTML', '');
  this.MBRightHTML=spm_getAttr(o, 'MBRHTML', '');

  this.rootArrow = spm_getAttr(o, 'RootArrow', '0');
  this.rootArrowImage = spm_getAttr(o, 'RootArrowImage', '');
  this.arrowImage = spm_getAttr(o, 'ArrowImage', '');
  this.backImage=spm_getAttr(o, 'BackImage', '');

  //--- Transition Properteis ---//
  //this.menuEffectsStyle=spm_getAttr(o, 'MenuEffectsStyle', '');
  this.menuTransitionLength=spm_getAttr(o, 'MenuTransitionLength', .3);
  this.menuTransition=spm_getAttr(o, 'MenuTransition', 'None');
  this.menuTransitionStyle=spm_getAttr(o, 'MenuTransitionStyle', '');
  this.SolpartMenuTransitionObject = new SolpartMenuTransitionObject();
  
  //--- Behavior Properteis ---//
  this.moveable = spm_getAttr(o, 'Moveable', '0');
  this.moDisplay=spm_getAttr(o, 'MODisplay', 'HighLight');
  this.moExpand=spm_getAttr(o, 'MOExpand', "-1");
  this.moutDelay=spm_getAttr(o, 'MOutDelay', "0");

  //--- Sizing Properties ---//
  this.menuBarHeight=spm_fixUnit(spm_getAttr(o, 'MenuBarHeight', '0'));
  this.menuItemHeight=spm_fixUnit(spm_getAttr(o, 'MenuItemHeight', '0'));
  this.iconWidth=spm_fixUnit(spm_getAttr(o, 'IconWidth', '0'));
  this.borderWidth=spm_getAttr(o, 'BorderWidth', '1');

  //--- CSS Properties ---//
  this.cssMenuContainer=spm_getAttr(o, 'CSSMenuContainer', '');
  this.cssMenuBar=spm_getAttr(o, 'CSSMenuBar', '');
  this.cssMenuItem=spm_getAttr(o, 'CSSMenuItem', '');
  this.cssMenuIcon=spm_getAttr(o, 'CSSMenuIcon', '');
  this.cssSubMenu=spm_getAttr(o, 'CSSSubMenu', '');
  this.cssMenuBreak=spm_getAttr(o, 'CSSMenuBreak', '');
  this.cssMenuItemSel=spm_getAttr(o, 'CSSMenuItemSel', '');
  this.cssMenuArrow=spm_getAttr(o, 'CSSMenuArrow', '');
  this.cssMenuRootArrow=spm_getAttr(o, 'CSSRootMenuArrow', '');
  
  //---- methods ---//
  //this.GenerateMenuHTML=__GenerateMenuHTML;

  //----- private ----//
  this._m_sNSpace = o.id;               //stores namespace for menu
  this._m_sOuterTables = '';            //stores HTML for sub menus
  this._m_oDOM;                         //stores XML DOM object
	this._m_oMenu = o;                    //stores container
  this._m_oMenuMove;                    //stores control that is used for moving menu
  
  this._m_oTblMenuBar;                  //stores menu container
	this._m_aOpenMenuID = new Array();	  //stores list of menus that are currently displayed
	this._m_bMoving=false;                //flag to determine menu is being dragged
  this._m_dHideTimer = null;            //used to time when mouse out occured to auto hide menu based on mouseoutdelay

	//--- Exposed Events ---//
/*
	this.onMenuComplete=spm_getAttr(o, 'OnMenuComplete', null);						//fires once menu is done loading
	this.onMenuBarClick=spm_getAttr(o, 'OnMenuBarClick', null);						//fires once menu bar is clicked
	this.onMenuItemClick=spm_getAttr(o, 'OnMenuItemClick', null);         //fires once menu item is clicked
	this.onMenuBarMouseOver=spm_getAttr(o, 'OnMenuBarMouseOver', null);		//fires once mouse moves over menu bar
	this.onMenuBarMouseOut=spm_getAttr(o, 'OnMenuBarMouseOut', null);			//fires once mouse moves out of menu bar
	this.onMenuItemMouseOver=spm_getAttr(o, 'OnMenuItemMouseOver', null);	//fires once mouse moves over menu item
	this.onMenuItemMouseOut=spm_getAttr(o, 'OnMenuItemMouseOut', null);		//fires once mouse moves out of menu bar
*/

//--- Menu Moving currently disabled ---//
/*
  this._menuhook_MouseMove=__menuhook_MouseMove;
  this._menuhook_MouseDown=__menuhook_MouseDown;
  this._menuhook_MouseUp=__menuhook_MouseUp;
  this._document_MouseMove=__document_MouseMove;
  this._document_MouseDown=__document_MouseDown;
  this._document_MouseUp=__document_MouseUp;
  this._bodyclick=__bodyclick;

  this.menuhook_MouseMove=function(e) {me._menuhook_MouseMove(e);};
  this.menuhook_MouseDown=function(e) {me._menuhook_MouseDown(e);};
  this.menuhook_MouseUp=function(e) {me._menuhook_MouseUp(e);};
  this.document_MouseMove=function(e) {me._document_MouseMove(e);};
  this.document_MouseDown=function(e) {me._document_MouseDown(e);};
  this.menuhook_MouseUp=function(e) {me._menuhook_MouseUp(e);};
  this.bodyclick=function() {me._bodyclick();};
*/ 
__db(this._m_oMenu.id + ' - constructor end');
}

//--- Destroys interrnal object references ---//
SolpartMenu.prototype.destroy = function ()
{
  this.systemImagesPath = null;  
  this.iconImagesPath = null;
  this.xml = null;
  this.xmlFileName = null;

  //--- Appearance Properties ---//
  this.fontStyle = null;
  this.backColor = null;  
  this.foreColor = null;
  this.iconBackColor = null;
  this.hlColor = null;
  this.shColor = null; 
  this.selColor = null;
  this.selForeColor = null;
  this.selBorderColor = null;
  this.menuAlignment = null;
  this.display = null;

  this.rootArrow = null;
  this.rootArrowImage = null;
  this.arrowImage = null;
  this.backImage = null;

  //--- Transition Properteis ---//
  //this.menuEffectsStyle = null;
  this.menuTransitionLength = null;
  this.menuTransition = null;
  this.SolpartMenuTransitionObject = null;
  
  //--- Behavior Properteis ---//
  this.moveable = null;
  this.moDisplay = null;
  this.moExpand = null;
  this.moutDelay = null;

  //--- Sizing Properties ---//
  this.menuBarHeight = null;
  this.menuItemHeight = null;
  this.iconWidth = null;
  this.borderWidth = null;

  //--- CSS Properties ---//
  this.cssMenuContainer = null;
  this.cssMenuBar = null;
  this.cssMenuItem = null;
  this.cssMenuIcon = null;
  this.cssSubMenu = null;
  this.cssMenuBreak = null;
  this.cssMenuItemSel = null;
  this.cssMenuArrow = null;
  this.cssMenuRootArrow = null;
  
  //---- methods ---//
  //this.GenerateMenuHTML=__GenerateMenuHTML = null;

  //----- private ----//
  m_oSolpartMenu[this._m_sNSpace] = null;

  this._m_sNSpace = null;                 //stores namespace for menu
  this._m_sOuterTables = null;            //stores HTML for sub menus
  this._m_oDOM = null;                    //stores XML DOM object
	this._m_oMenu = null;                   //stores container
  this._m_oMenuMove = null;               //stores control that is used for moving menu
  
  this._m_oTblMenuBar = null;             //stores menu container
	this._m_aOpenMenuID = null;	            //stores list of menus that are currently displayed
	this._m_bMoving = null;                 //flag to determine menu is being dragged
  this._m_dHideTimer = null;              //used to time when mouse out occured to auto hide menu based on mouseoutdelay
}

//--- static/shared members ---//
/*
SolpartMenu.prototype.menuhook_MouseMove=__menuhook_MouseMove;
SolpartMenu.prototype.menuhook_MouseDown=__menuhook_MouseDown;
SolpartMenu.prototype.menuhook_MouseUp=__menuhook_MouseUp;

SolpartMenu.prototype.document_MouseMove=__document_MouseMove;
SolpartMenu.prototype.document_MouseDown=__document_MouseDown;
SolpartMenu.prototype.document_MouseUp=__document_MouseUp;
*/

//--- xml document loaded (non-dataisland) ---//
SolpartMenu.prototype.onXMLLoad = function ()
{
  this.GenerateMenuHTML(this._m_oDOM);
}

//--- Generates menu HTML through passed in XML DOM ---//
SolpartMenu.prototype.GenerateMenuHTML = function (oXML) 
{
__db(this._m_oMenu.id + ' - GenerateMenuHTML');
    //'Generates the main menu bar
  var sHTML = '';
  this._m_sOuterTables = '';
  //this._m_oMenu.insertAdjacentElement('beforeBegin', );

  
	//if (oXML.readyState != 'complete')
	//	return;

	if (oXML == null)
	{
	  if (this._m_oDOM == null)
	  {
	    oXML = spm_createDOMDoc();//document.implementation.createDocument("", "", null);
	    this._m_oDOM = oXML;
        	  
	    if (this.xml.length)
	      oXML.loadXML(this.xml);
  	  
	    if (this.xmlFileName.length)
	    {
	      //alert(m_oSolpartMenu.length);
	      oXML.onload = eval('onxmlload' + this._m_sNSpace); //'m_oSolpartMenu["' + this._m_sNSpace + '"].onXMLLoad'; this.onXMLLoad;
	      oXML.load(this.xmlFileName);
	      return; //async load
	    }
    }
	}
	else
	  this._m_oDOM = oXML;
  if (this.display == "vertical")
  {
      sHTML += '<table ID="tbl' + this._m_sNSpace + 'MenuBar" CELLPADDING=\'0\' CELLSPACING=\'0\' BORDER="0" CLASS="' + spm_fixCSSForMac(this.getIntCSSName('spmbctr') + this.cssMenuContainer) + '" HEIGHT="100%" STYLE="position: relative; vertical-align: center; display: block;">\n';
      sHTML += MyIIf(this.MBLeftHTML.length, '<tr>\n       <td>' + this.MBLeftHTML + '</td>\n</tr>\n', '');
      sHTML += MyIIf(Number(this.moveable), '<tr>\n       <td ID="td' + this._m_sNSpace + 'MenuMove" height=\'3px\' style=\'cursor: move; ' + spm_getMenuBorderStyle(this) + '\'>' + spm_getSpacer(this) + '</td>\n</tr>\n', '');
      sHTML +=         this.GetMenuItems(this._m_oDOM.documentElement);
      sHTML += '       <tr><td HEIGHT="100%">' + spm_getSpacer(this) + '</td>\n' ;
      sHTML += '   </tr>\n';
      sHTML += MyIIf(this.MBRightHTML.length, '<tr>\n       <td>' + this.MBRightHTML + '</td>\n</tr>\n', '');
      sHTML += '</table>\n';
  }
  else
  {
      sHTML += '<table ID="tbl' + this._m_sNSpace + 'MenuBar" CELLPADDING=\'0\' CELLSPACING=\'0\' BORDER="0" CLASS="' + spm_fixCSSForMac(this.getIntCSSName('spmbctr') + this.cssMenuContainer) + '" WIDTH="100%" STYLE="position: relative; vertical-align: center; display: block;">\n';
      sHTML += '	<tr>\n';
      sHTML += MyIIf(this.MBLeftHTML.length, '<td>' + this.MBLeftHTML + '</td>\n', '');
      sHTML += MyIIf(Number(this.moveable), '       <td ID="td' + this._m_sNSpace + 'MenuMove" width=\'3px\' style=\'cursor: move; ' + spm_getMenuBorderStyle(this) + '\'>' + spm_getSpacer(this) + '</td>\n', '');
      sHTML += spm_getMenuSpacingImage('left', this);
      sHTML +=         this.GetMenuItems(this._m_oDOM.documentElement);
      sHTML += spm_getMenuSpacingImage('right', this);
      sHTML += MyIIf(this.MBRightHTML.length, '<td>' + this.MBRightHTML + '</td>\n', '');
      sHTML += '   </tr>\n';
      sHTML += '</table>\n';
  }
  
	if (isOpera())
	{
		this._m_oMenu.innerHTML = sHTML;
		var oDiv = document.createElement('div');
		oDiv.innerHTML = this._m_sOuterTables;
		document.body.appendChild(oDiv);
	}
	else  
		sHTML = '<SPAN>' + this._m_sOuterTables + '</SPAN>' + sHTML;
  //sHTML = "<table><tr><td>THIS IS A TEST</td></tr></table>";

  this._m_oMenu.innerHTML = sHTML;
  //spm_getById('txtDebug').value = sHTML;
  //if (spm_browserType() != 'ie')
  //  this._m_oMenu.innerHTML = sHTML;  //Mozilla/NS issue with events not firing... why?
    
  //return '';
  this._m_oMenuMove = spm_getById('td' + this._m_sNSpace + 'MenuMove')

  //if (spm_browserType() == 'ie' && isMac() == false)
  //  window.attachEvent("onunload", this.destroy);
  //else
  //  window.addEventListener("onunload", this.destroy, true);

/*
this._m_oMenu.insertAdjacentHTML("afterend", "<TEXTAREA TYPE='txt' id='txtDebug' rows=50 cols=100></TEXTAREA>");
document.all('txtDebug').innerText = this._m_oMenu.outerHTML;
*/
/*
  //--- attach events for menu moving ---//
  if (Number(this.moveable))
  {
    var oCtl = this._m_oMenuMove;  //this._m_oMenu
    oCtl.onmousedown = this.menuhook_MouseDown;
    oCtl.onmouseup = this.menuhook_MouseUp;
    oCtl.onmousemove = this.menuhook_MouseMove;

    if (spm_browserType() == 'ie')
    {
      document.onmousemove = this.document_MouseMove;
      document.onmousedown = this.document_MouseDown;
      //spm_getTags("BODY")[0].onclick = this.bodyclick;
      spm_getTags("BODY")[0].attachEvent('onclick', this.bodyclick);
    }
    else
    {
	    window.addEventListener("click", this.bodyclick, true);
	    window.addEventListener("mousemove", this.document_MouseMove, true);
	    window.addEventListener("mousedown", this.document_MouseDown, true);
	    window.addEventListener("mouseup", this.document_MouseUp, true);
    }

  }
*/
  //if (spm_browserType() == 'ie')
		spm_getTags("BODY")[0].onclick = spm_appendFunction(spm_getTags("BODY")[0].onclick, 'm_oSolpartMenu["' + this._m_sNSpace + '"].bodyclick();'); //document.body.onclick = this.bodyclick;
	//else
	//	window.addEventListener("click", this.bodyclick, true);

  this._m_oTblMenuBar = spm_getById('tbl' + this._m_sNSpace + 'MenuBar'); //this._m_oMenu
  
  this.fireEvent('onMenuComplete');

__db(this._m_oMenu.id + ' - GenerateMenuHTML end');    
}

function spm_getMenuBarEvents(sCtl)
{
  return 'onmouseover="m_oSolpartMenu[\'' + sCtl + '\'].onMBMO(this);" onmouseout="m_oSolpartMenu[\'' + sCtl + '\'].onMBMOUT(this);" onclick="m_oSolpartMenu[\'' + sCtl + '\'].onMBC(this, event);" onmousedown="m_oSolpartMenu[\'' + sCtl + '\'].onMBMD(this);" onmouseup="m_oSolpartMenu[\'' + sCtl + '\'].onMBMU(this);"';
}

function spm_getMenuItemEvents(sCtl)
{
  return 'onmouseover="m_oSolpartMenu[\'' + sCtl + '\'].onMBIMO(this);" onmouseout="m_oSolpartMenu[\'' + sCtl + '\'].onMBIMOUT(this);" onclick="m_oSolpartMenu[\'' + sCtl + '\'].onMBIC(this, event);"';
}

//--- Returns HTML for menu items (recursive function) ---//
SolpartMenu.prototype.GetMenuItems = function (oParent)
{
//return '';
  var oNode;
  var sHTML = '';
  var sID;
  var sParentID;
  var sClickAction;
  
	for (var i = 0; i < oParent.childNodes.length; i++)
	{
		oNode = oParent.childNodes[i];

		if (oNode.nodeType != 3)  //exclude nodeType of Text (Netscape/Mozilla) issue!
		{
		  //'determine if root level item and set parent id accordingly
		  if (oNode.parentNode.nodeName != "menuitem")
			  sParentID = "-1";
		  else
			  sParentID = oNode.parentNode.getAttribute("id");

		  if (oNode.nodeName == "menuitem")
			  sID = oNode.getAttribute("id");
		  else
			  sID = "";

  __db(sID + ' getmenuitems');

			sClickAction = spm_getMenuClickAction(oNode);

		  if (sParentID == "-1")	//'if top level menu item
		  {
			  if (this.display == "vertical")
				  sHTML += "<tr>\n"; //'if vertical display then add rows for each top menuitem
  				
			  sHTML += '<td>\n<table width="100%" CELLPADDING="0" CELLSPACING="0">\n<tr id="td' + this._m_sNSpace + sID + '" ' + spm_getMenuBarEvents(this._m_sNSpace) + '  class="' + spm_fixCSSForMac(this.getIntCSSName('spmbar spmitm') + this.cssMenuBar + ' ' + this.cssMenuItem + ' ' + spm_getMenuItemCSS(oNode)) + '" savecss="' + spm_getMenuItemCSS(oNode) + '" menuclick="' + sClickAction + '" style="' + spm_getMenuItemStyle('item', oNode) + '">\n<td NOWRAP="NOWRAP">' + spm_getImage(oNode, this) + spm_getItemHTML(oNode, 'left', '&nbsp;') + oNode.getAttribute('title') + spm_getItemHTML(oNode, 'right') + MyIIf(Number(this.rootArrow) && spm_nodeHasChildren(oNode), '</td>\n<td align="right" class="' + spm_fixCSSForMac(this.getIntCSSName('spmrarw') + this.cssMenuRootArrow) + '">' + spm_getArrow(this.rootArrowImage, this) + "", '&nbsp;') + '\n</td>\n</tr>\n</table>\n</td>\n';
  	    
	      //this._m_aMenuBarItems[this._m_aMenuBarItems.length] = 'td' + this._m_sNSpace + sID;
  	    
			  if (this.display == "vertical")
				  sHTML += "</tr>\n";
		  
		  }
		  else                        //'submenu - not top level menu item
		  {
			  switch(oNode.nodeName)
			  {
				  case "menuitem":
				  {
					  sHTML +=		'   <tr ID="tr' + this._m_sNSpace + sID + '" ' + spm_getMenuItemEvents(this._m_sNSpace) + ' parentID="' + sParentID + '" class="' + spm_fixCSSForMac(this.getIntCSSName('spmitm') + this.cssMenuItem + ' ' + spm_getMenuItemCSS(oNode)) + '" savecss="' + spm_getMenuItemCSS(oNode) + '" menuclick="' + sClickAction + '" style="' + spm_getMenuItemStyle('item', oNode) + '">\n';
					  sHTML +=		'       <td id="icon' + this._m_sNSpace + sID + '" class="' + spm_fixCSSForMac(this.getIntCSSName('spmicn') + this.cssMenuIcon) + '" style="' + spm_getMenuItemStyle('image', oNode) + '">' + spm_getImage(oNode, this) + '</td>\n';
					  sHTML +=		'       <td id="td' + this._m_sNSpace + sID + '" class="' + spm_fixCSSForMac(this.getIntCSSName('spmitm') + this.cssMenuItem + ' ' + spm_getMenuItemCSS(oNode)) + '" savecss="' + spm_getMenuItemCSS(oNode) + '" NOWRAP="NOWRAP" >' + oNode.getAttribute('title') + '</td>\n';
					  sHTML +=		'       <td id="arrow' + this._m_sNSpace + sID + '" width="15px" CLASS="' + spm_fixCSSForMac(this.getIntCSSName('spmarw') + this.cssMenuArrow) + '">' + MyIIf(spm_nodeHasChildren(oNode), spm_getArrow(this.arrowImage, this), spm_getSpacer(this)) + '</td>\n';
					  sHTML +=		'   </tr>\n';

    	      //this._m_aMenuItems[this._m_aMenuItems.length] = 'tr' + this._m_sNSpace + sID;

					  break;
				  }
				  case "menubreak":
				  {
					  //if (this._m_oMenu.IconBackgroundColor == this.backColor)
						//  sHTML += '   <tr><td NOWRAP height="0px" colspan="3" class="spmbrk ' + this.cssMenuBreak + '">' + spm_getMenuImage('spacer.gif', this, true) + '</td></tr>';
					  //else
						  sHTML += '   <tr>\n<td style="height: 1px" class="' + spm_fixCSSForMac(this.getIntCSSName('spmicn') + this.cssMenuIcon) + '">' + spm_getMenuImage('spacer.gif', this, true) + '</td>\n<td colspan="2" class="' + spm_fixCSSForMac(this.getIntCSSName('spmbrk') + this.cssMenuBreak) + '">' + spm_getMenuImage('spacer.gif', this, true) + '</td>\n</tr>\n';

					  break;
				  }
			  }
		  }

		  //'Generate sub menu - note: we are recursively calling ourself
		  //'netscape renders tables with display: block as having cellpadding!!! therefore using div outside table - LAME!
		  if (oNode.childNodes.length > 0)
			  this._m_sOuterTables = '\n<DIV ID="tbl' + this._m_sNSpace + sID + '" CLASS="' + spm_fixCSSForMac(this.getIntCSSName('spmsub') + this.cssSubMenu) + '" STYLE="display:none; position: absolute;' + this.menuTransitionStyle + '">\n<table CELLPADDING="0" CELLSPACING="0">\n' + this.GetMenuItems(oNode) + '\n</table>\n</DIV>\n' + this._m_sOuterTables;

    }
	}
	return sHTML;
}

	//--------------- Event Functions ---------------//
  //--- menubar click event ---//
	SolpartMenu.prototype.onMBC = function (e, evt)
	{
		var oCell = e; //event.srcElement;
		var sID = oCell.id.substr(2);