toolbar.js

javascript实现的 toolbar

/***************************************************************************************
 *                                   toolbar1.0
 *     此代码版权归海洋工作室ocean所有，您可以自由的使用、复制、修改此代码，但需要
 * 保留本工作室的版权信息。如果您修改了此代码，请将修改后的代码发回本工作室备案。
 *
 * 如果您对本程序有什么建议，请email to:[e-mail]。
 *
 *                                                                          海洋工作室
 *                                                          http://www.oceanstudio.net
 *                                                     ocean([e-mail]) 制作
 *****************************************************************************************/
//button class constructor
var crrT = null;

function tgetReal(eE, type, value) 
{
	temp = eE;
	while ((temp != null) && (temp.tagName != "BODY")) 
	{
		if (eval("temp." + type) == value) 
		{
			eE = temp;
			return eE;
		}
		temp = temp.parentElement;
	}
	return null;
}

function getToolRef(eE)
{
	var oE = tgetReal(eE,"isToo","yes")
	if (oE == null) crrT = null;
	else eval("crrT = " + oE.id);
}

function button(type,image,title,text,disable,status,value,currentValue,handle)
{
   this.type = type;	//button type: 1  normal;  2 pressed;  3  text;   4  select;    5  separator
   this.image = image;	//button image, if the button have no image, the image is null
   this.title = title;	//button prompt title, if the button needn't have title, the title is ""
   this.text = text;	//button text: a any string
   this.disable = disable;	//if the button disabled, the disable set true.
   
   //this.status:  	the button current status:1  normal,  2  pressed,   3  raised
   if  (type == 2)
   {
       if (disable)
          this.status = 1;
       else if (status != 2)
				this.status = 1;
			else this.status = 2;
   }
   else this.status = 1;
   
   this.value = value;				//the select button allow values or the text button length
   this.currentValue = currentValue;	//the text,select button current value
   this.handle = handle;				
   //if the normal and pressed button click event,the text button blur event or the select button change event occurs, the handle is performed.
}

function toolbar(id,title,ismove,bgcolor,bgimage,left,top,width,fgcolor,view)
{
    this.id = id;
    this.buttons = new Array();
    this.title = title;
    this.ismove = ismove;
    this.bgcolor = bgcolor;
    if (bgimage == "") bgimage = null;
    this.bgimage = bgimage;
    this.left = left;
    this.top = top;
    this.width = width;
    this.height = "22px";
    this.fgcolor = fgcolor;
    this.view = view;
    this.drag = false;
    this.bartx = 0;
    this.barty = 0;
    this.order = 0;
}

toolbar.prototype.addNormalButton = function (image,title,text,disable,handle)
{
   if (image == "") image == null;
   if (disable) disable = true;
   else disable = false;
   var tempbutton = new button(1,image,title,text,disable,1,"","",handle);
   var length = this.buttons.length;
   this.buttons[length] = tempbutton;
}

toolbar.prototype.addPressedButton = function (image,title,text,disable,status,handle)
{
   if (image == "") image == null;
   if (disable) disable = true;
   else disable = false;
   var tempbutton = new button(2,image,title,text,disable,status,"","",handle);
   var length = this.buttons.length;
   this.buttons[length] = tempbutton;
}

toolbar.prototype.addTextButton = function (image,title,text,disable,length,currentValue,handle)
{
   if (image == "") image == null;
   if (disable) disable = true;
   else disable = false;
   var tempbutton = new button(3,image,title,text,disable,1,length,currentValue,handle);
   var length = this.buttons.length;
   this.buttons[length] = tempbutton;
}

toolbar.prototype.addSelectButton = function (image,title,text,disable,value,currentValue,handle)
{
    if (image == "") image == null;
    if (disable) disable = true;
    else disable = false;
    var tempbutton = new button(4,image,title,text,disable,1,value,currentValue,handle);
    var length = this.buttons.length;
    this.buttons[length] = tempbutton;
}

toolbar.prototype.addSeparator = function ()
{
    var tempbutton = new button(5,null,"","",true,1,"","",null);
    var length = this.buttons.length;
    this.buttons[length] = tempbutton;
}
toolbar.prototype.draw = function ()
{
   //var tempHTML = '<div id="'+this.id + '" style="display:none;" isToo="yes">';
   var oDiv=document.createElement("DIV");
   oDiv.id = this.id;
   oDiv.style.display = "none";
   oDiv.noWrap = true;
   oDiv.setAttribute("isToo","yes");
   
   var tempHTML = '\
   <table id="'+this.id + 't" cellspacing="0" cellpadding="0">\
	<tr>\
	<td nowrap style="cursor:move;width: 6;PADDING-LEFT: 2px;PADDING-RIGHT: 4px;" isB="yes" torder="drag"><span  id="'+ this.id + 'h"></span></td>\
    <td nowrap valign="MIDDLE" style="cursor:move"  isB="yes" torder="drag" nowrap><img src="toolimage/blank.gif" align="absbottom" border=0><b>'+this.title+'</b></td>';
    for (var i=0;i<this.buttons.length;i++)
    {
        if ((this.buttons[i].type == 1) || (this.buttons[i].type == 2))   	//normal or pressed button
        {
            tempHTML += '<td id="'+ this.id + '_'+ i + '" title="'+this.buttons[i].title+'" valign="MIDDLE" nowrap  isB="yes"  torder="'+i+'">';
            if (this.buttons[i].image == null)
               tempHTML += '<img src="toolimage/blank.gif" align="absbottom" border=0>';
            else
               tempHTML += '<img src="'+this.buttons[i].image + '" align="absbottom" border=0>';
            if (this.buttons[i].text == "")
				tempHTML += '</td>';
            else
				tempHTML += '&nbsp;' + this.buttons[i].text + '&nbsp;</td>';
        }
        else if (this.buttons[i].type == 3)		//text button
        {
            tempHTML += '<td nowrap>' + this.buttons[i].text + '<input id="'+ this.id + '_'+ i + '" size=' + this.buttons[i].value + ' isB="yes"  torder="'+i+'"></td>';
        }
        else if (this.buttons[i].type == 4)		//select button
        {
            tempHTML += '<td nowrap>' + this.buttons[i].text + '<select id="'+ this.id + '_'+ i + '" isB="yes"  torder="'+i+'">';
            for (var j=0;j<this.buttons[i].value.length;j++)
                 tempHTML += '<option value="' + this.buttons[i].value[j] + '">'+this.buttons[i].value[j] + '</option>';
			tempHTML += '</select></td>';
        }
        else if (this.buttons[i].type == 5)		//separator
        {
            tempHTML += '<td nowrap id="'+ this.id + '_'+ i + '" style="width: 4;PADDING-LEFT: 2px;PADDING-RIGHT: 2px;" isB="yes" torder="'+i+'"><span></span></td>';
        }
    }
    tempHTML += '</tr></table>';
    oDiv.innerHTML = tempHTML;
    //document.write (tempHTML);
    if (this.view)
		document.body.appendChild(oDiv);
	else
		document.write(oDiv.outerHTML);
    var odragbar = document.all (this.id)
    if (odragbar == null) return;
    with (odragbar.style)
    {
		borderRight="buttonshadow 1px solid";
		paddingRight = "1px";
		backgroundPosition = "right top";
		borderTop = "buttonhighlight 1px solid";
		paddingLeft = "0px";
		borderLeft = "buttonhighlight 1px solid";
		cursor = "default";
		borderBottom = "buttonshadow 1px solid";
		backgroundRepeat = "no-repeat";
		height = this.height;
		width = this.width;
		top = this.top;
		left = this.left;
		fontColor = this.fgcolor;
		backgroundColor = this.bgcolor;
		zIndex = "9";
		color = this.fgcolor;
    }
    if (this.ismove) odragbar.style.position = "absolute";
    else  odragbar.style.position = "relative";
    if (this.bgimage) odragbar.style.backgroundImage = "url(" + this.bgimage + ")";
    
    var odragt = document.all (this.id + "t");
    if (odragt == null) return;
    with (odragt.style)
    {
		borderRight="buttonshadow 1px solid";
		paddingRight = "1px";
		backgroundPosition = "right top";
		borderTop = "buttonhighlight 1px solid";
		paddingLeft = "0px";
		backgroundImage = "url(" + this.bgimage + ")";
		borderLeft = "buttonhighlight 1px solid";
		cursor = "default";
		borderBottom = "buttonshadow 1px solid";
		backgroundRepeat = "no-repeat";
		fontColor = this.fgcolor;
		backgroundColor = this.bgcolor;
		color = this.fgcolor;
    }
	odragt = null;
	
	var ohandle = document.all (this.id + "h");
	if (ohandle == null) return;
	with (ohandle.style)
	{
		borderRight = "buttonshadow 1px solid";
		borderTop = "buttonhighlight 1px solid";
		borderLeft = "buttonhighlight 1px solid";
		width = "3px";
		borderBottom = "buttonshadow 1px solid";
		height = "18px";
	
	}
	
	for (var i=0;i<this.buttons.length;i++)
	{
	    var oButton = document.all (this.id + "_" + i);
	    if (oButton == null) return;
	    if (this.buttons[i].type == 5)
	    {
			var spans = this.findChildren(oButton,"tagName","SPAN");
			for (var j=0;j<spans.length;j++)
				with (spans[j].style)
				{
					borderRight = "buttonhighlight 1px solid";
					borderLeft = "buttonshadow 1px solid";
					width = "2px";
					height = "18px";
				}
	    }
	    else if (this.buttons[i].type != 2)
	    {
			this.normalButton(i);
			this.disableButton(i,this.buttons[i].disable);
	    }
	    else
	    {
			if (this.buttons[i].status == 2)
				this.pressedButton(i);
			else
				this.normalButton(i);
			this.disableButton(i,this.buttons[i].disable);
	    }
	}
	odragbar.style.display = "block";
	odragbar = null;  
	this.initToolbar(); 
}

toolbar.prototype.getValue = function ()
{
	window.event.returnValue = false;
	window.event.cancelBubble = true;
	var oE = tgetReal(window.event.srcElement,"isB","yes");
	if (oE == null) return;
	var i = parseInt(oE.torder);
	getToolRef(window.event.srcElement);
	if (crrT == null) return;
	if ((i<0)||(i>=crrT.buttons.length)||isNaN(i)) return;
	crrT.order = i;
	if ((crrT.buttons[i].type != 3) && (crrT.buttons[i].type != 4)) return;
	crrT.buttons[i].currentValue = oE.value;
}

toolbar.prototype.deleteBar = function ()
{
	var odragbar = document.all (this.id);
	if (odragbar)
	{
		odragbar.removeNode(true);
		document.detachEvent("onmousemove",this.doMouseMove);
	}
		
}

toolbar.prototype.disableButton = function (order,disable)
{