taskmenu.js

TaskMenu 3.0 用javascript写的模仿任务栏TaskMenu的程序

//****************************************************
//                TaskMenu 3.0
//   		   静静的黎明 
//           http://www.docode.cn 
//**************************************************** 
/////////////////////////////////////////////////////////////////////////////////
var INF_IS_IEXPLORER = (navigator.userAgent.indexOf("MSIE") == -1)? false : true;
var INF_IS_MENU_BEHAVIOR_AUTO       = true;
var INF_IS_SCROLLBAR_ENABLED        = false;
///////////////////////////////////////////////////////
/////////////*** CONFIG ***////////////////////////////
var CFG_FRAME_COUNT                 = 6;
var CFG_DOCUMENT_MARGIN             = 12;
var CFG_MENU_SPACING                = 15;
var CFG_MENU_WIDTH                  = 185;
var CFG_SCROLLBAR_WIDTH             = 17;
var CFG_TITLEBAR_HEIGHT             = 25;
var CFG_TITLEBAR_LEFT_WIDTH         = 13;
var CFG_TITLEBAR_RIGHT_WIDTH        = 25;
var CFG_TITLEBAR_MIDDLE_WIDTH = CFG_MENU_WIDTH - CFG_TITLEBAR_LEFT_WIDTH - CFG_TITLEBAR_RIGHT_WIDTH;
var CFG_TITLEBAR_BORDER_WIDTH       = 0;
var CFG_MENUBODY_PADDING            = 9;
var CFG_MENUBODY_BORDER_WIDTH       = 1;
var CFG_SLEEP_TIME_BEGIN            = 20;
var CFG_SLEEP_TIME_END              = 60;
var CFG_ALPHA_STEP = Math.ceil( 100 / (CFG_FRAME_COUNT) );
var CFG_IS_SCROLLBAR_ENABLED        = true;
var CFG_IS_SPECIAL_HEAD_NODE        = false;

//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
if(new Array().push == null)
{
	//usage: array.push(Array); for ie5.0
	Array.prototype.push = function()
	{
		this[this.length] = arguments[0];
		return this.length;
	}
}
if(new Array().splice == null)
{
	/// usage: array.splice(startPos,deleteCount,[item1,item2,...]);for ie5.0
	Array.prototype.splice = function()
	{
		if(arguments.length < 2 || arguments[1] < 0) 
			return new Array();

		var endPoint1 = arguments[0];	
		if(endPoint1 < 0 && Math.abs(endPoint1) > this.length)
			endPoint1 = 0;

		var startPoint2 = (endPoint1 < 0)? (this.length + endPoint1 + arguments[1]) : (endPoint1 + arguments[1]);

		var bArray = this.slice(0,endPoint1);	
		var dArray = this.slice(endPoint1,startPoint2);
		var eArray = this.slice(startPoint2);
		var nArray = new Array();
		for(var i = 2; i < arguments.length; i++)
		{
			nArray.push(arguments[i]);
		}	
		var fArray = bArray.concat(nArray,eArray);

		for(var i = 0; i < fArray.length; i++)
		{
			this[i] = fArray[i];
		}
		this.length = fArray.length;
		
		return dArray;
	}
}
			
/////////////////////////////////////////////////////////////////		
function TaskMenuState(){}
TaskMenuState.uninited      =  0;
TaskMenuState.open          =  1;
TaskMenuState.close         =  2;
TaskMenuState.opening       =  4;
TaskMenuState.closing       =  8;
TaskMenuState.transforming  = 16;

function TaskMenuItem(strLabel,strIcon,strCommand)
{
	this.label      = strLabel;
	this.icon       = strIcon;
	this.command    = strCommand;
	this.hItem      = null;
	this.hLabel     = null;
	this.hIcon      = null;
	this.hLabelCell = null;
	this.container  = null;
	this.operTimer  = null;
	this.tranTimer  = null;
	this.operStep   = 0;
	this.tranStep   = 0;
	this.operCount  = 0;
	this.tranCount  = 0;

	this.init = function()
	{
		(this.hLabel = document.createElement("FONT")).reflectClass = this;
		with(this.hLabel)
		{	
			reflectClass = this;
		}
		with(this.hItem = document.createElement("TABLE"))
		{	
			cellPadding = 0;
			cellSpacing = 0;
			style.width = "100%";
		}
		(itemRow = this.hItem.insertRow(0)).className="MenuItemRow";
		with(blankCell = itemRow.insertCell(0))
		{
			style.width = (CFG_MENUBODY_PADDING - 2) +"px";
		}
		with(iconCell = itemRow.insertCell(1))
		{
			align  = "RIGHT";
			style.cssText = "width:18px;vertical-align:top;padding-top:3px";						
			with(this.hIcon = iconCell.appendChild(document.createElement("DIV")))
			{
				className = "IconContainer";
			}
		}
		
		with(this.hLabelCell = itemRow.insertCell(2))
		{
			style.padding = "2px " + CFG_MENUBODY_PADDING +"px 2px 5px";
			appendChild(this.hLabel);				
		}
		with(this)
		{
			setIcon(icon);	setLabel(label); setCommand(command);
		}
	}

	this.getLabel = function()
	{
		return this.label;
	}

	this.setLabel = function(strLabel)
	{
		this.hLabel.innerHTML = this.label = strLabel;
	}
	this.getIcon = function()
	{
		return this.icon;
	}

	this.setIcon = function(strIcon)
	{
		this.icon = strIcon;

		while(this.hIcon.firstChild != null)
		{
			this.hIcon.removeChild(this.hIcon.firstChild);
		}

		if(this.icon != null)
		{
			with(this.hIcon)
			{				
				style.width = "18px";
				parentNode.style.width = "18px";
				with(appendChild(new Image()))
				{
					src= this.icon;
				}
			}
		}
		else
		{
			this.hIcon.style.width = "0px";
			this.hIcon.parentNode.style.width = "0px";
		}
	}

	this.getCommand = function()
	{
		return this.command;
	}

	this.setCommand = function(strCommand)
	{
		if( (this.command = strCommand) != null)
		{
			JS.addListener(this.hLabel,"mouseover",TaskMenuItem.onMouseBehavior,false);
			JS.addListener(this.hLabel,"mouseout",TaskMenuItem.onMouseBehavior,false);
			JS.addListener(this.hLabel,"click",TaskMenuItem.onClick,false);
			this.hLabel.className = "MenuItemLabel";
		}		
		else
		{
			JS.removeListener(this.hLabel,"mouseover",TaskMenuItem.onMouseBehavior,false);
			JS.removeListener(this.hLabel,"mouseout",TaskMenuItem.onMouseBehavior,false);
			JS.removeListener(this.hLabel,"click",TaskMenuItem.onClick,false);
			this.hLabel.className = "MenuItemLabelDisabled";
		}
	}

	this.runCommand = function()	
	{
		try
		{	
			eval(this.command);	
		}
		catch(ex)
		{	
			alert("Javascript Error:" + ex.description);	
		}
	}

	this.cloneNode = function()
	{
		return new TaskMenuItem(this.label,this.icon,this.command);
	}

	this.init();
}

TaskMenuItem.onMouseBehavior = function()
{
	with(JS.getSourceElement(arguments[0]))
	{
		if(arguments[0].type.toUpperCase() == "MOUSEOVER")
			className = "MenuItemLabelMouseOver";
		
		else
			className = "MenuItemLabel"; 
	}	
}

TaskMenuItem.onClick = function()
{
	var refClass = JS.getSourceElement(arguments[0]).reflectClass;
	if(refClass != null) refClass.runCommand();
}

function TaskMenu(strLabel,menuState)
{
	this.menuID;
	this.label       = strLabel;
	this.state       = menuState;
	this.items       = [];
	this.hLabel      = null;
	this.hArrayCell  = null;
	this.titlebar    = null;
	this.menuBody    = null;
	this.previous    = null;
	this.next        = null;
	this.background  = null;
	this.operationTimer;
	this.transformTimer;
	this.invalidateTimer
	this.operationStep;
	this.transformStep;
	this.operationSleep;
	this.transformSleep;

	this._getAlphaOpacity = function()
	{
		try
		{
			if(INF_IS_IEXPLORER)	
				return this.menuBody.filters.alpha.opacity;

			else
				return this.menuBody.style.MozOpacity * 100;
		}
		catch(ex)
		{
			return 100;
		}	
	}

	this._setAlphaOpacity = function(n)
	{
		try
		{
			if(INF_IS_IEXPLORER)
				this.menuBody.filters.alpha.opacity = n;

			else
				this.menuBody.style.MozOpacity = n / 100;
		}
		catch(ex)
		{}	
	}
	this._clearItem = function()
	{
		for(var i =0; i< this.items.length; i++)
		{
			this.items[i].container = null;
		}
		this.items = new Array();
	}

	this._clearMenu = function()
	{
		if(this.menuBody == null) return;

		while(this.menuBody.firstChild != null)
			this.menuBody.removeChild(this.menuBody.firstChild);
	}

	this._setMenuFixed = function(bFlag)
	{
		if(this.menuBody == null) return;

		if(bFlag == true)	
		{
			this.menuBody.style.overflow = "hidden";
		}
		else
		{
			this.menuBody.style.overflow = "visible";
			this.menuBody.style.height   = "auto";	
		}			
	}

	this._setMenuHeight = function(height)
	{
		if(INF_IS_IEXPLORER)
			this.menuBody.style.height = height + "px";

		else
			this.menuBody.style.height = ( height - (2 * CFG_MENUBODY_PADDING + CFG_MENUBODY_BORDER_WIDTH) ) + "px";
	}

	this._getMenuHeight = function()
	{
		if(INF_IS_IEXPLORER)
			return this.menuBody.scrollHeight + CFG_MENUBODY_BORDER_WIDTH;

		else
		{
			var scrollHeight = 0;
			for(var i = 0; i < this.menuBody.childNodes.length; i++)
			{
				scrollHeight += this.menuBody.childNodes[i].offsetHeight;			
			}

			return scrollHeight + CFG_MENUBODY_BORDER_WIDTH + 2 * CFG_MENUBODY_PADDING;
		}
	}
	
	this._getScrollWidth = function()
	{
		return (INF_IS_SCROLLBAR_ENABLED)? CFG_SCROLLBAR_WIDTH : 0
	}
	
	this._fixMenuWidth = function(value)
	{
		var titlebarWidth = ( CFG_MENU_WIDTH + ( (INF_IS_IEXPLORER)? 0 : ( -2 * CFG_TITLEBAR_BORDER_WIDTH ) ) );
		var menuBodyWidth = ( CFG_MENU_WIDTH + ( (INF_IS_IEXPLORER)? 0 : ( -2 * CFG_MENUBODY_BORDER_WIDTH ) ) );
		var labelCell = this.titlebar.firstChild.rows[0].cells[1];
		var scrollbarWidth = this._getScrollWidth();

		this.hLabel.style.width   = (CFG_TITLEBAR_MIDDLE_WIDTH - scrollbarWidth) + "px";
		labelCell.style.width     = (CFG_TITLEBAR_MIDDLE_WIDTH - scrollbarWidth) + "px";
		this.titlebar.style.width = (titlebarWidth - scrollbarWidth) + "px";
		this.menuBody.style.width = (menuBodyWidth - scrollbarWidth) + "px";
		
		this._invalidate(true);
	}

	this._fixedMenuPosWhileClose = function()
	{	
		var scrollHeight = this._getMenuHeight();
		this._setMenuHeight(scrollHeight);
		this.menuBody.style.top = (this.titlebar.offsetTop + CFG_TITLEBAR_HEIGHT - scrollHeight) + "px";
		this.menuBody.style.clip = "rect(" + scrollHeight +" auto " + scrollHeight + " auto)";	
		this._setAlphaOpacity(0);
	}

	this._attachState = function(state)
	{
		switch(state)
		{
			case TaskMenuState.open:
			case TaskMenuState.close:
			case TaskMenuState.opening:
			case TaskMenuState.closing:
				this.state >>= 4;
				this.state <<= 4;
			case TaskMenuState.transforming:
				this.state |= state;
			break;
			case TaskMenuState.uninited:
				this.state = state;
			break;
		}
	}

	this._removeState = function(state)
	{
		if(this.state & state)	this.state ^= state;	
	}

	this._invalidate = function(bForce)
	{
		if(INF_IS_MENU_BEHAVIOR_AUTO == true || bForce == true)
		{
			this.invalidate();
		}
	}

	this._extend = function()
	{
		if(this.state & TaskMenuState.close)
		{
			this._fixedMenuPosWhileClose();
			this._removeState(TaskMenuState.transforming);
		}
		else
		{
			if(this.menuBody.offsetHeight + this.transformStep < this._getMenuHeight())
			{
				this._setMenuHeight(this.menuBody.offsetHeight + this.transformStep);
				this.transformTimer = setTimeout("TaskMenu.collection[" + this.menuID + "]._extend()",this.transformSleep += 5);
			}
			else
			{
				this._setMenuHeight(this._getMenuHeight());		
				this._removeState(TaskMenuState.transforming);	
			}
		}
		if(this.next != null) this.next._moveTo();
		TaskMenu._refreshAll();
	}

	this._shorten = function()
	{
		if(this.state & TaskMenuState.close)
		{
			this._fixedMenuPosWhileClose();
			this._removeState(TaskMenuState.transforming);
		}
		else
		{	
			if(this.menuBody.offsetHeight + this.transformStep > this._getMenuHeight())
			{	
				this._setMenuHeight(this.menuBody.offsetHeight + this.transformStep);
				this.transformTimer = setTimeout("TaskMenu.collection[" + this.menuID + "]._shorten()",this.transformSleep += 5);
			}
			else
			{
				this._setMenuHeight(this._getMenuHeight());
				this._removeState(TaskMenuState.transforming);
			}
		}
		if(this.next != null) this.next._moveTo();
		TaskMenu._refreshAll();
	}

	this._appendItems = function()
	{
		if(this.menuBody == null || this.items.length == 0)return;

		for(var i = 0; i < this.items.length; i++)
			this.menuBody.appendChild(this.items[i].hItem);
	}

	this._isSpecialHeadNode = function()
	{
		return CFG_IS_SPECIAL_HEAD_NODE && this == TaskMenu.headNode;
	}
	
	this._open = function()
	{
		var titlebarBottom = this.titlebar.offsetTop + CFG_TITLEBAR_HEIGHT;