menu-for-applications.js

js Menu 多级菜单．．很好的哦． js Menu 多级菜单．．很好的哦．

	/**
	 *	Specify the css file for this menu bar
	 *
	 *  @param String nameOfNewCssFile = Name of new css file. 
	 *
	 * @public
	 */
	setLayoutCss : function(nameOfNewCssFile){
		this.layoutCSS = nameOfNewCssFile;

	}
	// }}}
	,
	// {{{ setMenuItemLayoutCss()
	/**
	 *	Specify the css file for the menu items
	 *
	 *  @param String nameOfNewCssFile = Name of new css file. 
	 *
	 * @public
	 */
	setMenuItemLayoutCss : function(nameOfNewCssFile){
		this.menuItemLayoutCss = nameOfNewCssFile;

	}
	// }}}
	,
	// {{{ setCreateIframesForOldIeBrowsers()
	/**
	 *	This method specifies if you want to the script to create iframes behind sub menu groups in order to cover eventual select boxes. This
	 *	is needed if you have users with older IE browsers(prior to version 7) and when there's a chance that a sub menu could appear on top
	 *	of a select box.
	 *
	 *  @param Boolean createIframesForOldIeBrowsers = true if you want the script to create iframes to cover select boxes in older ie browsers.
	 *
	 * @public
	 */
	setCreateIframesForOldIeBrowsers : function(createIframesForOldIeBrowsers){
		this.createIframesForOldIeBrowsers = createIframesForOldIeBrowsers;

	}
	// }}}
	,
	// {{{ addMenuItems()
	/**
	 *	Add menu items
	 *
	 *  @param DHTMLSuite.menuModel menuModel Object of class DHTMLSuite.menuModel which holds menu data 
	 *
	 * @public
	 */
	addMenuItems : function(menuItemObj){
		this.menuItemObj = menuItemObj;
		this.menuItems = menuItemObj.getItems();
	}
	// }}}
	,
	// {{{ setActiveSubItemsOnMouseOver()
	/**
	 *	 Specify if sub menus should be activated on mouse over(i.e. no matter what the menuState property is). 
	 *
	 *	@param Boolean activateSubOnMouseOver - Specify if sub menus should be activated on mouse over(i.e. no matter what the menuState property is).
	 *
	 * @public
	 */
	setActiveSubItemsOnMouseOver : function(activateSubOnMouseOver){
		this.activeSubItemsOnMouseOver = activateSubOnMouseOver;
	}
	// }}}
	,
	// {{{ setMenuItemState()
	/**
	 *	This method changes the state of the menu bar(expanded or collapsed). This method is called when someone clicks on the arrow at the right of menu items.
	 * 
	 *	@param Number menuItemId - ID of the menu item we want to switch state for
	 * 	@param String state - New state(example: "disabled")
	 *
	 * @public
	 */
	setMenuItemState : function(menuItemId,state){
		try{
			this.menuItem_objects[menuItemId].setState(state);
		}catch(e){
			alert('menu item with id ' + menuItemId + ' does not exists or you have called the setMenuItemState method before the menu has been initialized');
		}

	}
	// }}}
	,
	// {{{ setMenuItemCssPrefix()
	/**
	 *	Specify prefix of css classes used for the menu items. Default css prefix is "DHTMLSuite_". If you wish have some custom styling for some of your menus, 
	 *	create a separate css file and replace DHTMLSuite_ for the class names with your new prefix.  This is useful if you want to have two menus on the same page
	 *	with different stylings.
	 * 
	 *	@param String newCssPrefix - New css prefix for menu items.
	 *
	 * @public
	 */
	setMenuItemCssPrefix : function(newCssPrefix){
		this.menuItemCssPrefix = newCssPrefix;
	}
	// }}}
	,
	// {{{ setCssPrefix()
	/**
	 *	Specify prefix of css classes used for the menu bar. Default css prefix is "DHTMLSuite_" and that's the prefix of all css classes inside menu-bar.css(the default css file). 
	 *	If you want some custom menu bars, create and include your own css files, replace DHTMLSuite_ in the class names with your own prefix and set the new prefix by calling
	 *	this method. This is useful if you want to have two menus on the same page with different stylings.
	 * 
	 *	@param String newCssPrefix - New css prefix for the menu bar classes.
	 *
	 * @public
	 */
	setCssPrefix : function(newCssPrefix){
		this.cssPrefix = newCssPrefix;
	}
	// }}}
	,
	// {{{ deleteAllMenuItems()
	/**
	 *	Delete all menu items. This is useful if you want to replace the entire menu model. Remember to call init() after new model has been added.
	 *
	 * @private
	 */
	deleteAllMenuItems : function(){
		this.hideSubMenus(); // Hide all sub menus
		this.__deleteMenuItems(0,false);
		this.__clearAllMenuItems();
	}
	// }}}
	,
	// {{{ replaceSubMenus()
	/**
	 *	This method replaces existing sub menu items with a new subset (To replace all menu items, pass 0 as idOfParentMenuItem)
	 *
	 * 
	 *	@param Number idOfParentMenuItem - ID of parent element ( 0 if top node) - if set, all sub elements will be deleted and replaced with the new menu model.
	 *	@param menuModel newMenuModel - Reference to object of class menuModel
	 *
	 * @private
	 */
	replaceMenuItems : function(idOfParentMenuItem,newMenuModel){
		this.hideSubMenus();	// Hide all sub menus
		this.__deleteMenuItems(idOfParentMenuItem);	// Delete old menu items.
		this.menuItemObj.__appendMenuModel(newMenuModel,idOfParentMenuItem);	// Appending new menu items to the menu model.
		this.__clearAllMenuItems();
		this.__createMenuItems();
	}
	// }}}
	,
	// {{{ deleteMenuItems()
	/**
	 *	This method deletes menu items from the menu dynamically
	 * 
	 *	@param Number idOfParentMenuItem - Parent id - parent id of the elements to delete.
	 *	@param Boolean deleteParentElement - Should parent element also be deleted, or only sub elements?
	 *
	 * @public
	 */
	deleteMenuItems : function(idOfParentMenuItem,deleteParentElement){
		//this.hideSubMenus();	// Hide all sub menus
		this.__deleteMenuItems(idOfParentMenuItem,deleteParentElement);
		this.__clearAllMenuItems();
		this.__createMenuItems();
	}
	// }}}
	,
	// {{{ appendMenuItems()
	/**
	 *	This method appends menu items to the menu dynamically
	 * 
	 *	@param Integer idOfParentMenuItem - Parent id - where to append the new items.
	 *	@param menuModel newMenuModel - Object of type menuModel. This menuModel will be appended as sub elements of defined idOfParentMenuItem
	 *
	 * @public
	 */
	appendMenuItems : function(idOfParentMenuItem,newMenuModel){
		this.hideSubMenus();	// Hide all sub menus
		this.menuItemObj.__appendMenuModel(newMenuModel,idOfParentMenuItem);	// Appending new menu items to the menu model.
		this.__clearAllMenuItems();
		this.__createMenuItems();
	}
	// }}}
	,
	// {{{ hideMenuItem()
	/**
	 *	This method doesn't delete menu items. it hides them only.
	 * 
	 *	@param Number menuItemId - Id of the item you want to hide.
	 *
	 * @public
	 */
	hideMenuItem : function(menuItemId){
		this.menuItem_objects[menuItemId].hide();

	}
	// }}}
	,
	// {{{ showMenuItem()
	/**
	 *	This method shows a menu item. If the item isn't hidden, nothing is done.
	 * 
	 *	@param Number menuItemId - Id of the item you want to show
	 *
	 * @public
	 */
	showMenuItem : function(menuItemId){
		this.menuItem_objects[menuItemId].show();
	}
	// }}}
	,
	// {{{ setText()
	/**
	 *	Replace the text for a menu item
	 * 
	 *	@param Integer menuItemId - Id of menu item.
	 *	@param String newText - New text for the menu item.
	 *
	 * @public
	 */
	setText : function(menuItemId,newText){
		this.menuItem_objects[menuItemId].setText(newText);
	}
	// }}}
	,
	// {{{ setIcon()
	/**
	 *	Replace menu icon for a menu item. 
	 * 
	 *	@param Integer menuItemId - Id of menu item.
	 *	@param String newPath - Path to new menu icon. Pass blank or false if you want to clear the menu item.
	 *
	 * @public
	 */
	setIcon : function(menuItemId,newPath){
		this.menuItem_objects[menuItemId].setIcon(newPath);
	}
	// }}}
	,
	// {{{ __clearAllMenuItems()
	/**
	 *	Delete HTML elements for all menu items.
	 *
	 * @private
	 */
	__clearAllMenuItems : function(){
		for(var prop=0;prop<this.menuItemObj.menuItemsOrder.length;prop++){
			var id = this.menuItemObj.menuItemsOrder[prop];
			if(!id)continue;
			if(this.submenuGroups[id]){
				var div = document.getElementById(this.submenuGroups[id]);
				DHTMLSuite.discardElement(div);
				this.submenuGroups[id] = null;
			}
			if(this.submenuIframes[id]){
				var ref = document.getElementById(this.submenuIframes[id]);
				DHTMLSuite.discardElement(ref);
				this.submenuIframes[id] = null;
			}
		}
		this.submenuGroups = new Array();
		this.submenuIframes = new Array();
		this.menuBarObj.innerHTML = '';
	}
	// }}}
	,
	// {{{ __deleteMenuItems()
	/**
	 *	This method deletes menu items from the menu, i.e. menu model and the div elements for these items.
	 * 
	 *	@param Integer idOfParentMenuItem - Parent id - where to start the delete process.
	 *	@param Boolean includeParent - Delete parent menu item in addition to the sub menu items.
	 *
	 * @private
	 */
	__deleteMenuItems : function(idOfParentMenuItem,includeParent){
		if(includeParent)this.menuItemObj.__deleteANode(idOfParentMenuItem);
		if(!this.submenuGroups[idOfParentMenuItem])return;	// No sub items exists.
		this.menuItem_objects[idOfParentMenuItem].__setHasSub(false);	// Delete existing sub menu divs.
		this.menuItemObj.__deleteChildNodes(idOfParentMenuItem);	// Delete existing child nodes from menu model
		var groupBox = document.getElementById(this.submenuGroups[idOfParentMenuItem]);
		DHTMLSuite.discardElement(groupBox);// Delete sub menu group box. 
		if(this.submenuIframes[idOfParentMenuItem]){
			DHTMLSuite.discardElement(this.submenuIframes[idOfParentMenuItem]);
		}
		this.submenuGroups.splice(idOfParentMenuItem,1);
		this.submenuIframes.splice(idOfParentMenuItem,1);
	}
	// }}}
	,
	// {{{ __changeMenuBarState()
	/**
	 *	This method changes the state of the menu bar(expanded or collapsed). This method is called when someone clicks on the arrow at the right of menu items.
	 * 
	 *
	 * @private
	 */
	__changeMenuBarState : function(){
		var objectIndex = this.getAttribute('objectRef');
		var obj = DHTMLSuite.variableStorage.arrayDSObjects[objectIndex];
		var parentId = this.id.replace(/[^0-9]/gi,'');

		var state = obj.menuItem_objects[parentId].getState();

		if(state=='disabled')return;
		obj.menuBarState = !obj.menuBarState;
		if(!obj.menuBarState)obj.hideSubMenus();else{
			obj.hideSubMenus();
			setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + objectIndex + '].__expandGroup(' + parentId+ ')',10);
		}
	}
	// }}}
	,
	// {{{ __createDivs()
	/**
	 *	Create the main HTML elements for this menu dynamically
	 * 
	 *
	 * @private
	 */
	__createMainMenuDiv : function(){
		window.refTomenuBar = this;	// Reference to menu strip object

		this.menuBarObj = document.createElement('DIV');
		this.menuBarObj.className = this.cssPrefix + 'menuBar_' + this.menuItemObj.submenuType[1];

		if(!document.getElementById(this.targetId)){
			alert('No target defined for the menu object');
			return;
		}
		// Appending menu bar object as a sub of defined target element.
		var target = document.getElementById(this.targetId);
		target.appendChild(this.menuBarObj);
	}
	// }}}
	,
	// {{{ hideSubMenus()
	/**
	 *	Deactivate all sub menus ( collapse and set state back to regular )
	 *	In case you have a menu inside a scrollable container, call this method in an onscroll event for that element
	 *	example document.getElementById('textContent').onscroll = menuBar.__hideSubMenus;
	 * 
	 *	@param Event e - this variable is present if this method is called from an event. You will never use this parameter
	 *
	 * @public
	 */
	hideSubMenus : function(e){
		if(this && this.tagName){	/* Method called from event */
			if(document.all)e = event;
			var srcEl = DHTMLSuite.commonObj.getSrcElement(e);
			if(srcEl.tagName.toLowerCase()=='img')srcEl = srcEl.parentNode;
			if(srcEl.className && srcEl.className.indexOf('arrow')>=0){
				return;
			}

		}
		for(var no=0;no<DHTMLSuite.variableStorage.menuBar_highlightedItems.length;no++){
			if(DHTMLSuite.variableStorage.menuBar_highlightedItems[no].getState()!='disabled')DHTMLSuite.variableStorage.menuBar_highlightedItems[no].setState('regular');	// Set state back to regular
			DHTMLSuite.variableStorage.menuBar_highlightedItems[no].__hideGroup();	// Hide eventual sub menus
		}
		DHTMLSuite.variableStorage.menuBar_highlightedItems = new Array();
	}
	,
	// {{{ __hideSubMenusAfterSmallDelay()
	/**
	 *	Hide sub menu items after a small delay - mouse down event for the HTML elemnet
	 *
	 *
	 * @private
	 */
	__hideSubMenusAfterSmallDelay : function(){
		var ind = this.objectIndex;
		setTimeout('DHTMLSuite.variableStorage.arrayDSObjects[' + ind + '].hideSubMenus()',15);
	}
	// }}}
	,
	// {{{ __expandGroup()
	/**
	 *	Expand a group of sub items.
	 *
	 * 	@param integer idOfParentMenuItem - Id of parent element
	 *
	 * @private
	 */
	__expandGroup : function(idOfParentMenuItem){
		var groupRef = document.getElementById(this.submenuGroups[idOfParentMenuItem]);
		var subDiv = groupRef.getElementsByTagName('DIV')[0];

		var numericId = subDiv.id.replace(/[^0-9]/g,'');

		groupRef.style.visibility='visible';	// Show menu group.
		if(this.submenuIframes[idOfParentMenuItem])document.getElementById(this.submenuIframes[idOfParentMenuItem]).style.visibility = 'visible';	// Show iframe if it exists.
		DHTMLSuite.variableStorage.menuBar_highlightedItems[DHTMLSuite.variableStorage.menuBar_highlightedItems.length] = this.menuItem_objects[numericId];
		this.__positionSubMenu(idOfParentMenuItem);

		if(DHTMLSuite.clientInfoObj.isOpera){	/* Opera fix in order to get correct height of sub menu group */
			var subDiv = groupRef.getElementsByTagName('DIV')[0];	/* Find first menu item */
			subDiv.className = subDiv.className.replace('_over','_over');	/* By "touching" the class of the menu item, we are able to fix a layout problem in Opera */
		}
	}

	,
	// {{{ __activateMenuElements()
	/**
	 *	Traverse up the menu items and highlight them.
	 * 
	 *	@param HTMLElement parentMenuItemObject - Reference to the DIV tag(menu element) triggering the event. This would be the parent menu item of the sub menu to expand
	 *	@param Object menuBarObj