taskmenu.js

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

		if( (this.menuBody.offsetTop + this.operationStep) < titlebarBottom )
		{
			this.menuBody.style.top  = (this.menuBody.offsetTop + this.operationStep) + "px";
			this.menuBody.style.clip = "rect(" + (titlebarBottom - this.menuBody.offsetTop) + " auto " + (this.menuBody.offsetHeight - 1) + " auto)";
			this._setAlphaOpacity( this._getAlphaOpacity() + CFG_ALPHA_STEP );
			this.operationTimer = setTimeout("TaskMenu.collection[" + this.menuID + "]._open()",this.operationSleep);
			this.operationSleep += 5;
		}
		else
		{
			this.menuBody.style.top  = titlebarBottom + "px";
			this.menuBody.style.clip = "rect(auto auto auto auto)";
			this._attachState(TaskMenuState.open);
			this._setAlphaOpacity(100);
		}
		
		if(this.next) this.next._moveTo();
		TaskMenu._refreshAll();
	}

	this._close = function()
	{
		var menuBodyHeight = this._getMenuHeight();
		var menuBodyBottom = this.menuBody.offsetTop + menuBodyHeight;
		var titlebarBottom = this.titlebar.offsetTop + CFG_TITLEBAR_HEIGHT;

		if( (menuBodyBottom - this.operationStep) > titlebarBottom )
		{
			this.menuBody.style.top = (this.menuBody.offsetTop - this.operationStep) + "px";
			this._setAlphaOpacity( this._getAlphaOpacity() - CFG_ALPHA_STEP );	
			this.operationTimer = setTimeout("TaskMenu.collection[" + this.menuID + "]._close()",this.operationSleep);
			this.operationSleep += 5;
		}
		else
		{
			this.menuBody.style.top = ( (titlebarBottom - menuBodyHeight) ) + "px";
			this._setAlphaOpacity(0);
			this._attachState(TaskMenuState.close);
		}
		this.menuBody.style.clip = "rect(" + (Math.abs(titlebarBottom - this.menuBody.offsetTop)) +" auto " + (this.menuBody.offsetHeight - 1) + " auto)";	

		if(this.next) this.next._moveTo();
		TaskMenu._refreshAll();
	}

	this._moveBy = function(dist)
	{}

	this._moveTo = function()
	{	
		var primTop   = this.titlebar.offsetTop;
		var safePoint = this.previous.titlebar.offsetTop + CFG_TITLEBAR_HEIGHT + CFG_MENU_SPACING;
		var dstiTop   = this.previous.menuBody.offsetTop + this.previous.menuBody.offsetHeight + CFG_MENU_SPACING;
		if(dstiTop >= safePoint)
			this.titlebar.style.top = dstiTop + "px";

		else
			this.titlebar.style.top = safePoint + "px";

		if(this.state & TaskMenuState.open)
			this.menuBody.style.top = ( this.titlebar.offsetTop + CFG_TITLEBAR_HEIGHT ) + "px";

		else if(this.state & TaskMenuState.close)
			this.menuBody.style.top = ( this.titlebar.offsetTop + CFG_TITLEBAR_HEIGHT - this.menuBody.offsetHeight) + "px";

		else if(this.state & TaskMenuState.opening || this.state & TaskMenuState.closing)
			this.menuBody.style.top = (this.menuBody.offsetTop + (dstiTop - primTop) ) + "px";

		if(this.next != null) this.next._moveTo();
	}
	
	this.init = function(initFlag)
	{	
		if(initFlag != true && (this.titlebr != null || this.menuBody != null))return;

		this.state = (this.state == false)? TaskMenuState.close : TaskMenuState.open;
		this.label = (this.label == null )? new String() : this.label.toString();
		var fixString = (CFG_IS_SPECIAL_HEAD_NODE == true && TaskMenu.headNode == null)? "_Head" : "";
		with(this.titlebar = document.createElement("DIV"))
		{
			className    = "MenuTitlebar";
			style.top    = ((TaskMenu.headNode == null)? CFG_DOCUMENT_MARGIN : (TaskMenu.rearNode.menuBody.offsetTop + TaskMenu.rearNode.menuBody.offsetHeight + CFG_MENU_SPACING)) + "px";
			style.left   = CFG_DOCUMENT_MARGIN + "px";
			style.width  = (CFG_MENU_WIDTH + ( (INF_IS_IEXPLORER)? 0 : ( -2 * CFG_TITLEBAR_BORDER_WIDTH ) ) - this._getScrollWidth()) + "px";
			style.height = CFG_TITLEBAR_HEIGHT + "px";
		}
		with(titlebarContainer = document.createElement("TABLE"))
		{
			cellPadding = "0";
			cellSpacing = "0";
		}
		with(titlebarRow = titlebarContainer.insertRow(0))
		{
			style.width  = CFG_MENU_WIDTH      + "px";
			style.height = CFG_TITLEBAR_HEIGHT + "px";
		}
		JS.addListener(titlebarRow,"click",TaskMenu._onClick,false);
		JS.addListener(titlebarRow,"mouseover",TaskMenu._onMouseBehavior,false);	
		JS.addListener(titlebarRow,"mouseout",TaskMenu._onMouseBehavior,false);			
		with(leftCell = titlebarRow.insertCell(0))
		{
			className    = "MenuTitlebarLeft"      + fixString;
			style.width  = CFG_TITLEBAR_LEFT_WIDTH + "px";
		}
		leftCell.reflectClass = this;
		with(middleCell = titlebarRow.insertCell(1))
		{
			className    = "MenuTitlebarMiddle"      + fixString;
			style.width  = ( CFG_TITLEBAR_MIDDLE_WIDTH - this._getScrollWidth() ) + "px";
			with(this.hLabel = appendChild(document.createElement("DIV")))
			{
				className    = "MenuTitle" + fixString;
				style.width  = (CFG_TITLEBAR_MIDDLE_WIDTH - this._getScrollWidth()) + "px";
				style.height = (CFG_TITLEBAR_HEIGHT) + "px";
				style.lineHeight = (CFG_TITLEBAR_HEIGHT) + "px";
			}
			this.hLabel.reflectClass = this;		
		}
		middleCell.reflectClass = this;
		with(this.hArrayCell = titlebarRow.insertCell(2))
		{
			className   = "MenuTitlebarRight" + ((this.state == TaskMenuState.close)? "_Close" : "_Open") + fixString;
			style.width = CFG_TITLEBAR_RIGHT_WIDTH + "px";
		}
		this.hArrayCell.reflectClass = this;
		this.setLabel(this.getLabel());
		this.titlebar.appendChild(titlebarContainer);
		document.body.appendChild(this.titlebar);

		with(this.menuBody = document.createElement("DIV"))
		{
			className     = "MenuBody"  + fixString;
			style.cssText = "border-width:0px " + CFG_MENUBODY_BORDER_WIDTH + "px " + CFG_MENUBODY_BORDER_WIDTH + "px " + CFG_MENUBODY_BORDER_WIDTH + "px; " + ( (this.background != null)? "background-image:url('" + this.background + "');" : "" );
			style.top     = ( parseInt(this.titlebar.style.top) + CFG_TITLEBAR_HEIGHT ) + "px";
			style.left    = CFG_DOCUMENT_MARGIN + "px";
			style.width   = ( CFG_MENU_WIDTH + ( (INF_IS_IEXPLORER)? 0 : - (2 * CFG_MENUBODY_BORDER_WIDTH)) - ((INF_IS_SCROLLBAR_ENABLED)? CFG_SCROLLBAR_WIDTH : 0) ) + "px";
			style.height  = "auto";
			style.padding = CFG_MENUBODY_PADDING + "px 0px";
			style.MozOpacity = 1.0;
		}
		document.body.appendChild(this.menuBody);

		if(TaskMenu.headNode == null)
			TaskMenu.headNode = this;

		else
			TaskMenu.rearNode.next = this;

		this.previous     = TaskMenu.rearNode;
		TaskMenu.rearNode = this;

		this.menuID = TaskMenu.collection.push(this) - 1;

		if(this.items.length > 0)
		{
			this._setMenuFixed(false);
			this._appendItems();
			this._setMenuFixed(true);
		}
		this._setMenuHeight(this._getMenuHeight());

		if(this.state == TaskMenuState.close)
		{
			this._fixedMenuPosWhileClose();
		}
		TaskMenu._refreshAll();
	}

	this.add  = function(taskMenuItems,iPosition)
	{
		var nItem = new Array();
		if(taskMenuItems instanceof Array)
		{
			for(var i = 0; i < taskMenuItems.length; i++)
			{
				if(taskMenuItems[i] instanceof TaskMenuItem)
				{
					(dstItem = (taskMenuItems[i].container == null)? taskMenuItems[i] : taskMenuItems[i].cloneNode()).container = this;
					nItem.push(dstItem);
				}
			}
		}
		else if(taskMenuItems instanceof TaskMenuItem)
		{			
			(nItem[0] = (taskMenuItems.container == null)? taskMenuItems : taskMenuItems.cloneNode()).container = this;
		}
		else 
			return;

		if(iPosition == null || typeof iPosition != "number" || iPosition < 0 || iPosition > nItem.Length)
		{
			iPosition = this.items.length;
		}			
		this.items = this.items.slice(0,iPosition).concat( nItem , this.items.slice(iPosition ) );	

		this._setMenuFixed(true);
		this._clearMenu();
		this._appendItems();
		this._invalidate();
	}

	this.remove = function(arg1,arg2)
	{	
		var deletedItems = new Array();
		if(arguments.length == 2 && typeof arg1 == "number" && typeof arg2 == "number")
		{	
			deletedItems = this.items.splice(arg1,arg2);
		}	
		else if(arguments.length == 1 && typeof arg1 == "number")
		{
			deletedItems = this.items.splice(arg1,1);
		}
		else if(arguments.length == 1 && arg1 instanceof TaskMenuItem)
		{
			for(var i = 0; i < this.items.length; i++)
			{
				if(this.items[i] == arg1)
				{
					deletedItems = this.items.splice(i,1);	
					break;
				}
			}
		}
		else if(arguments.length == 0)
		{
			this.clear();
		}		
		else
		{
			alert("Error at TaskMenu.remove");
			return;
		}
		for(var i = 0; i < deletedItems.length; i++)
		{
			deletedItems[i].container = null;
		}
		this._clearMenu();
		this._appendItems();
		this._invalidate();
	}

	this.item = function(n)
	{
		if(typeof n == "number")
			return this.items[n];
	}

	this.clear = function()
	{
		clearTimeout(this.transformTimer);
		this._removeState(TaskMenuState.transforming);
		this._clearItem();
		this._clearMenu();
		this._invalidate();
	}

	this.setLabel = function(label)
	{
		this.label = (label == null)? new String() : label.toString();
		with(this.hLabel)
		{
			(INF_IS_IEXPLORER)? innerText = this.label : textContent = this.label;
		}
		this.titlebar.title = this.label;
	}

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

	this.setBackground = function(srcImage)
	{
		this.background = srcImage;
		if(this.titlebar != null && this.menuBody != null)
		{
			if(srcImage != null)
				this.menuBody.style.backgroundImage = "url(" + srcImage + ")";
			else
				this.menuBody.style.backgroundImage = "url()";
		}		
	}

	this.invalidate = function()
	{	
		if(this.titlebar == null || this.menuBody == null) return;
		
		var nScrollHeight = this._getMenuHeight();
		var tfDistance    = nScrollHeight - this.menuBody.offsetHeight;	
		
		if(tfDistance == 0) return;
		clearTimeout(this.transformTimer);
		clearTimeout(this.invalidateTimer);
		this._attachState(TaskMenuState.transforming);

		this.transformSleep = CFG_SLEEP_TIME_BEGIN;
		this.transformStep  = (tfDistance > 0)? Math.ceil(tfDistance / CFG_FRAME_COUNT) : Math.floor(tfDistance / CFG_FRAME_COUNT);

		if(this.state & TaskMenuState.closing)
			this.operationStep = Math.ceil(nScrollHeight / CFG_FRAME_COUNT);

		if(tfDistance > 0)
			this.invalidateTimer = setTimeout("TaskMenu.collection[" + this.menuID + "]._extend()",50);
		
		else
			this.invalidateTimer = setTimeout("TaskMenu.collection[" + this.menuID + "]._shorten()",50);
	}
	this.click = function()
	{
		clearTimeout(this.operationTimer);
		this.operationSleep = CFG_SLEEP_TIME_BEGIN;

		var nodeTypeFix = (this._isSpecialHeadNode())? "_Head" : "";
		this.operationStep = Math.ceil(this._getMenuHeight() / CFG_FRAME_COUNT);

		if(this.state & TaskMenuState.open || this.state & TaskMenuState.opening)
		{
			this._attachState(TaskMenuState.closing);
			this.hArrayCell.className = "MenuTitlebarRight_Close_MouseOver" + nodeTypeFix;
			this._close();
		}
		else if(this.state & TaskMenuState.close ||this.state & TaskMenuState.closing)
		{
			this._attachState(TaskMenuState.opening);
			this.hArrayCell.className = "MenuTitlebarRight_Open_MouseOver" + nodeTypeFix;
			this._open();
		}
	}
}

TaskMenu.headNode    = null;
TaskMenu.rearNode    = null;
TaskMenu.collection  = new Array();

TaskMenu._isScrollbarEnabled = function()
{	
	return (TaskMenu.rearNode.menuBody.offsetTop + TaskMenu.rearNode.menuBody.offsetHeight) > document.body.clientHeight;
}

TaskMenu._isScrollbarChanged = function()
{
	var currentScrollbarStatus;
	try
	{
		currentScrollbarStatus = TaskMenu._isScrollbarEnabled();
		return INF_IS_SCROLLBAR_ENABLED != currentScrollbarStatus;
	}
	catch(ex)
	{
		return false;
	}
	finally
	{
		INF_IS_SCROLLBAR_ENABLED = currentScrollbarStatus;
	}		
}

TaskMenu._onClick = function()
{
	var srcElement = JS.getSourceElement(arguments[0]);
	var srcMenu = srcElement.reflectClass;
	if(srcMenu != null)
	{
		srcMenu.click();
	}	
}

TaskMenu._onMouseBehavior = function()
{
	var refMenu = JS.getSourceElement(arguments[0]).reflectClass;

	var nodeTypeFix = (refMenu._isSpecialHeadNode())? "_Head" : "";
	var behaviorFix = (arguments[0].type.toUpperCase() == "MOUSEOVER")? "_MouseOver" : "";

	refMenu.hLabel.className = "MenuTitle" + behaviorFix + nodeTypeFix;
	if( (refMenu.state & TaskMenuState.open) || (refMenu.state & TaskMenuState.opening) )
	{
		refMenu.hArrayCell.className = "MenuTitlebarRight_Open" + behaviorFix + nodeTypeFix;
	}
	else if( (refMenu.state & TaskMenuState.close) || (refMenu.state & TaskMenuState.closing) )
	{
		refMenu.hArrayCell.className = "MenuTitlebarRight_Close" + behaviorFix + nodeTypeFix;	
	}		
}

TaskMenu._invalidateAll = function()
{
	for(var i = 0; i < TaskMenu.collection.length; i++)
	{
		TaskMenu.collection[i]._fixMenuWidth();
	}
}

TaskMenu._refreshAll = function()
{
	if( CFG_IS_SCROLLBAR_ENABLED )
		if(TaskMenu._isScrollbarChanged())
		{	
			TaskMenu._invalidateAll();
		}
}	

TaskMenu.setStyle = function(strCssFile)
{
	var HeadElement = document.getElementsByTagName("HEAD")[0];
	var cssFileID   = "__TaskMenuCssFile__";
	while(document.getElementById("TaskMenuCssFile") != null)
	{
		try
		{	
			HeadElement.removeChild(document.getElementById(cssFileID ));	
		}		
		catch(ex)	
		{}
	}
	with(HeadElement.appendChild(document.createElement("LINK")))
	{
		id = cssFileID; href = strCssFile; rel = "stylesheet"; type = "text/css";
	}
}

TaskMenu.setAutoBehavior = function(value)
{
	INF_IS_MENU_BEHAVIOR_AUTO = (value == false)? false : true;
}

TaskMenu.setHeadMenuSpecial = function(value)
{
	CFG_IS_SPECIAL_HEAD_NODE = (value == true)? true : false;
}

TaskMenu.setScrollbarEnabled = function(value)
{
	CFG_IS_SCROLLBAR_ENABLED = (value == false)? false : true;
	try
	{
		if(CFG_IS_SCROLLBAR_ENABLED)
			document.body.style.overflowY = "auto";

		else
			document.body.style.overflowY = "hidden";
	}
	catch(ex)
	{
		alert(ex.description);
	}
}

function JS()
{}
JS.getSourceElement = function(evt)
{
	return (evt.target == null)? evt.srcElement : evt.target;
}
JS.addListener = function(obj,eventName,callbackFunction,flag)
{ 
	if(obj.attachEvent)
		obj.attachEvent("on" + eventName,callbackFunction);
	else if(obj.addEventListener)
		obj.addEventListener(eventName,callbackFunction,flag);
	else
		eval("obj.on" + eventName + "=" + callbackFunction);
}
JS.removeListener = function(obj,eventName,callbackFunction,flag)
{ 
	if(obj.detachEvent)
		obj.detachEvent("on" + eventName,callbackFunction);
	else if (obj.removeEventListener)
		obj.removeEventListener(eventName,callbackFunction,flag);
	else
		eval("obj.on" + eventName + "= new Function()");
}

JS.addListener(window,"resize",new Function("setTimeout(\"TaskMenu._refreshAll()\",30);"),false);
JS.addListener(window,"error",new Function("return true"),false);