menu-for-applications.js

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

	 *	Creates the different parts of a menu item of type "top".
	 *
	 *  @param String newLayoutCss = Name of css file used for the menu items.
	 *
	 * @public
	 */
	setLayoutCss : function(newLayoutCss){
		this.layoutCSS = newLayoutCss;

	}
	// }}}
	,
	// {{{ __createMenuElementsOfTypeTop()
	/**
	 *	Creates the different parts of a menu item of type "top".
	 *
	 *  @param menuModelItem menuModelItemObj = Object of type menuModelItemObj
	 *  @param Object parentEl = Reference to parent element
	 *
	 * @private
	 */
	__createMenuElementsOfTypeTop : function(parentEl){
		if(this.modelItemRef.itemIcon){
			var iconDiv = document.createElement('DIV');
			iconDiv.innerHTML = '<img src="' + this.modelItemRef.itemIcon + '">';
			iconDiv.id = 'menuItemIcon' + this.modelItemRef.id
			parentEl.appendChild(iconDiv);
		}
		if(this.modelItemRef.itemText){
			var div = document.createElement('DIV');
			div.innerHTML = this.modelItemRef.itemText;
			div.className = this.cssPrefix + 'menuItem_textContent';
			div.id = 'menuItemText' + this.modelItemRef.id;
			parentEl.appendChild(div);
		}
		if(this.modelItemRef.hasSubs){
			/* Create div for the arrow -> Show sub items */
			var div = document.createElement('DIV');
			div.className = this.cssPrefix + 'menuItem_top_arrowShowSub';
			div.id = 'DHTMLSuite_menuBar_arrow' + this.modelItemRef.id;
			parentEl.appendChild(div);
			this.expandElement = div.id;
		}

	}
	// }}}
	,

	// {{{ __createMenuElementsOfTypeSub()
	/**
	 *	Creates the different parts of a menu item of type "sub".
	 *
	 *  @param menuModelItem menuModelItemObj = Object of type menuModelItemObj
	 *  @param Object parentEl = Reference to parent element
	 *
	 * @private
	 */
	__createMenuElementsOfTypeSub : function(parentEl){
		if(this.modelItemRef.itemIcon){
			parentEl.style.backgroundImage = 'url(\'' + this.modelItemRef.itemIcon + '\')';
			parentEl.style.backgroundRepeat = 'no-repeat';
			parentEl.style.backgroundPosition = 'left center';
		}
		if(this.modelItemRef.itemText){
			var div = document.createElement('DIV');
			div.className = 'DHTMLSuite_textContent';
			div.innerHTML = this.modelItemRef.itemText;
			div.className = this.cssPrefix + 'menuItem_textContent';
			div.id = 'menuItemText' + this.modelItemRef.id;
			parentEl.appendChild(div);
		}

		if(this.modelItemRef.hasSubs){
			/* Create div for the arrow -> Show sub items */
			var div = document.createElement('DIV');
			div.className = this.cssPrefix + 'menuItem_sub_arrowShowSub';
			parentEl.appendChild(div);
			div.id = 'DHTMLSuite_menuBar_arrow' + this.modelItemRef.id;
			this.expandElement = div.id;
			div.previousSibling.style.paddingRight = '15px';
		}
	}
	// }}}
	,
	// {{{ setCssPrefix()
	/**
	 *	Set css prefix for the menu item. default is 'DHTMLSuite_'. This is useful in case you want to have different menus on a page with different layout.
	 *
	 *  @param String cssPrefix = New css prefix. 
	 *
	 * @public
	 */
	setCssPrefix : function(cssPrefix){
		this.cssPrefix = cssPrefix;
	}
	// }}}
	,
	// {{{ setMenuIcon()
	/**
	 *	Replace menu icon.
	 *
	 *	@param String newPath - Path to new icon (false if no icon);
	 *
	 * @public
	 */
	setIcon : function(newPath){
		this.modelItemRef.setIcon(newPath);
		if(this.modelItemRef.type=='top'){	// Menu item is of type "top"
			var div = document.getElementById('menuItemIcon' + this.modelItemRef.id);	// Get a reference to the div where the icon is located.
			var img = div.getElementsByTagName('IMG')[0];	// Find the image
			if(!img){	// Image doesn't exists ?
				img = document.createElement('IMG');	// Create new image
				div.appendChild(img);
			}
			img.src = newPath;	// Set image path
			if(!newPath)DHTMLSuite.discardElement(img);	// No newPath defined, remove the image.
		}
		if(this.modelItemRef.type=='sub'){	// Menu item is of type "sub"
			document.getElementById(this.divElement).style.backgroundImage = 'url(\'' + newPath + '\')';		// Set backgroundImage for the main div(i.e. menu item div)
		}
	}
	// }}}
	,
	// {{{ setText()
	/**
	 *	Replace the text of a menu item
	 *
	 *	@param String newText - New text for the menu item.
	 *
	 * @public
	 */
	setText : function(newText){
		this.modelItemRef.setText(newText);
		document.getElementById('menuItemText' + this.modelItemRef.id).innerHTML = newText;

	}

	// }}}
	,
	// {{{ __clickMenuItem()
	/**
	 *	Effect - click on menu item
	 *
	 *
	 * @private
	 */
	__clickMenuItem : function(){
		this.className = this.className.replace('_regular','_click');
		this.className = this.className.replace('_over','_click');
	}
	// }}}
	,
	// {{{ __rolloverMenuItem()
	/**
	 *	Roll over effect
	 *
	 *
	 * @private
	 */
	__rolloverMenuItem : function(){
		this.className = this.className.replace('_regular','_over');
		this.className = this.className.replace('_click','_over');
	}
	// }}}
	,
	// {{{ __rolloutMenuItem()
	/**
	 *	Roll out effect
	 *
	 *
	 * @private
	 */
	__rolloutMenuItem : function(){
		this.className = this.className.replace('_over','_regular');

	}
	// }}}
	,
	// {{{ setState()
	/**
	 *	Set state of a menu item.
	 *
	 *	@param String newState = New state for the menu item
	 *
	 * @public
	 */
	setState : function(newState){
		document.getElementById(this.divElement).className = this.cssPrefix + 'menuItem_' + this.modelItemRef.type + '_' + newState; 
		this.modelItemRef.setState(newState);
	}
	// }}}
	,
	// {{{ getState()
	/**
	 *	Return state of a menu item. 
	 *
	 *
	 * @public
	 */
	getState : function(){
		var state = this.modelItemRef.getState();
		if(!state){
			if(document.getElementById(this.divElement).className.indexOf('_over')>=0)state = 'over';
			if(document.getElementById(this.divElement).className.indexOf('_click')>=0)state = 'click';
			this.modelItemRef.setState(state);
		}
		return state;
	}
	// }}}
	,
	// {{{ __setHasSub()
	/**
	 *	Update the item, i.e. show/hide the arrow if the element has subs or not. 
	 *
	 *
	 * @private
	 */
	__setHasSub : function(hasSubs){
		this.modelItemRef.hasSubs = hasSubs;
		if(!hasSubs){
			document.getElementById(this.cssPrefix +'menuBar_arrow' + this.modelItemRef.id).style.display='none';
		}else{
			document.getElementById(this.cssPrefix +'menuBar_arrow' + this.modelItemRef.id).style.display='block';
		}
	}
	// }}}
	,
	// {{{ hide()
	/**
	 *	Hide the menu item.
	 *
	 *
	 * @public
	 */
	hide : function(){
		this.modelItemRef.setVisibility(false);
		document.getElementById(this.divElement).style.display='none';
	}
	,
 	// {{{ show()
	/**
	 *	Show the menu item.
	 *
	 *
	 * @public
	 */		 
	show : function(){
		this.modelItemRef.setVisibility(true);
		document.getElementById(this.divElement).style.display='block';
	}
	// }}}
	,
	// {{{ __hideGroup()
	/**
	 *	Hide the group the menu item is a part of. Example: if we're dealing with menu item 2.1, hide the group for all sub items of 2
	 *
	 *
	 * @private
	 */
	__hideGroup : function(){
		if(this.modelItemRef.parentId){
			document.getElementById(this.divElement).parentNode.style.visibility='hidden';
			if(DHTMLSuite.clientInfoObj.isMSIE){
				try{
					var tmpId = document.getElementById(this.divElement).parentNode.id.replace(/[^0-9]/gi,'');
					document.getElementById('DHTMLSuite_menuBarIframe_' + tmpId).style.visibility = 'hidden';
				}catch(e){
					// IFRAME hasn't been created.
				}
			}
		}

	}
	// }}}
	,
	// {{{ __navigate()
	/**
	 *	Navigate after click on a menu item.
	 *
	 *
	 * @private
	 */
	__navigate : function(e){
		/* Check to see if the expand sub arrow is clicked. if it is, we shouldn't navigate from this click */
		if(document.all)e = event;
		if(e){
			var srcEl = DHTMLSuite.commonObj.getSrcElement(e);
			if(srcEl.id.indexOf('arrow')>=0)return;
		}
		if(this.modelItemRef.state=='disabled')return;
		if(this.modelItemRef.url){
			location.href = this.modelItemRef.url;
		}
		if(this.modelItemRef.jsFunction){
			try{
				eval(this.modelItemRef.jsFunction);
			}catch(e){
				alert('Defined Javascript code for the menu item( ' + this.modelItemRef.jsFunction + ' ) cannot be executed');
			}
		}
	} 
}

/*[FILE_START:dhtmlSuite-menuBar.js] */
/************************************************************************************************************
*	DHTML menu bar class
*
*	Created:						October, 21st, 2006
*	@class Purpose of class:		Creates a top bar menu
*
*	Css files used by this script:	menu-bar.css
*
*	Demos of this class:			demo-menu-bar.html
*
* 	Update log:
*
************************************************************************************************************/
/**
* @constructor
* @class Purpose of class:	Creates a top bar menu strip. Demos: <br>
*	<ul>
*	<li>(<a href="../../demos/demo-menu-bar-2.html" target="_blank">A menu with a detailed description on how it is created</a>)</li>
*	<li>(<a href="../../demos/demo-pane-splitter.html" target="_blank">Menu bar in a pane splitter pane</a>)</li>
*	</ul>
*
*	<a href="../images/menu-bar-1.gif" target="_blank">Image describing the classes</a> <br><br>
*
* @version 1.0
* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
*/

DHTMLSuite.menuBar = function(){
	var menuItemObj;
	var layoutCSS;					// Name of css file
	var menuBarBackgroundImage;		// Name of background image
	var menuItem_objects;			// Array of menu items - html elements.
	var menuBarObj;					// Reference to the main dib
	var menuBarHeight;
	var menuItems;					// Reference to objects of class menuModelItem
	var highlightedItems;			// Array of currently highlighted menu items.
	var menuBarState;				// Menu bar state - true or false - 1 = expand items on mouse over
	var activeSubItemsOnMouseOver;	// Activate sub items on mouse over	(instead of onclick)

	var submenuGroups;				// Array of div elements for the sub menus
	var submenuIframes;				// Array of sub menu iframes used to cover select boxes in old IE browsers.
	var createIframesForOldIeBrowsers;	// true if we want the script to create iframes in order to cover select boxes in older ie browsers.
	var targetId;					// Id of element where the menu will be inserted.
	var menuItemCssPrefix;			// Css prefix of menu items.
	var cssPrefix;					// Css prefix for the menu bar
	var menuItemLayoutCss;			// Css path for the menu items of this menu bar
	var objectIndex;			// Global index of this object - used to refer to the object of this class outside
	this.cssPrefix = 'DHTMLSuite_';
	this.menuItemLayoutCss = false;	// false = use default for the menuItem class.
	this.layoutCSS = 'menu-bar.css';
	this.menuBarBackgroundImage = 'menu_strip_bg.jpg';
	this.menuItem_objects = new Object();
	DHTMLSuite.variableStorage.menuBar_highlightedItems = new Array();

	this.menuBarState = false;

	this.menuBarObj = false;
	this.menuBarHeight = 26;
	this.submenuGroups = new Array();
	this.submenuIframes = new Array();
	this.targetId = false;
	this.activeSubItemsOnMouseOver = false;
	this.menuItemCssPrefix = false;
	this.createIframesForOldIeBrowsers = true;
	try{
		if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();
	}catch(e){
		alert('You need to include the dhtmlSuite-common.js file');
	}

	this.objectIndex = DHTMLSuite.variableStorage.arrayDSObjects.length;;
	DHTMLSuite.variableStorage.arrayDSObjects[this.objectIndex] = this;
}

DHTMLSuite.menuBar.prototype = {
	// {{{ init()
	/**
	 *	Initilizes the script - This method should be called after your set methods.
	 *
	 *
	 * @public
	 */
	init : function(){

		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);
		this.__createMainMenuDiv();	// Create general divs
		this.__createMenuItems();	// Create menu items
		this.__setBasicEvents();	// Set basic events.
		window.refToThismenuBar = this;
	}
	// }}}
	,
	// {{{ setTarget()
	/**
	 *	Specify where this menu bar will be inserted. the element with this id will be parent of the menu bar.
	 *
	 *  @param String idOfHTMLElement = Id of element where the menu will be inserted. 
	 *
	 * @public
	 */
	setTarget : function(idOfHTMLElement){
		this.targetId = idOfHTMLElement;

	}
	// }}}
	,
	// {{{ setLayoutCss()