control.js

vc-mfc编程实例 很简单的东西,以后回多传自己的东西

			this.pNode.appendChild(returnElementArray[i]);
		}
		
		////////////set a padding//////////
		var padOnePixDiv=document.createElement("div");
		padOnePixDiv.style.clear="both";
		padOnePixDiv.style.height="1px";
		padOnePixDiv.style.width="1px";
		padOnePixDiv.style.overflow="hidden";
		this.pNode.appendChild(padOnePixDiv);
	}
}
//////////////////////space need ////////////////////////
var NeedSpaceBar=function()
{
	this.totalDiscNum=0;
	this.totalSpaceNeeded=0;
	this.getSpaceNeedInfo=function(storeType,total,spaceNeeded,width,hdss)
	{
		this.totalSpaceNeeded=spaceNeeded;
		var onePieceSpace;
		var pieceNeeded;
		var onePieceWidth;
		var lastPiecePercent;
		var errWidth;
		var addCount;
		var tmpStr="";
		var hddBgPersent=0;
		if (storeType=="cd") onePieceSpace=650-hdss;
		if (storeType=="dvd") onePieceSpace=4000-(5*hdss);
		if (storeType=="hdd" && total==0)
		{
			return "";
		}
		else if(storeType=="hdd" && total<spaceNeeded)
		{
			tmpStr+='<ul style="width:'+width+'px; margin:0px; height:16px; background-image:url(images/progresswaiting.jpg); background-repeat:repeat-x;">'
			tmpStr+='<li style="list-style:none; height:15px; font-size:12px; background-image:url(images/progressfinishedred.jpg); width:'+width+'px; border-left:1px solid #ffffff; text-align:center; float:left; line-height:15px; background-repeat:no-repeat;">&nbsp;</li>'
			tmpStr+="</ul>"
			return tmpStr;
		}
		if (storeType!="hdd")
		{
			if (Math.floor(spaceNeeded/onePieceSpace)==spaceNeeded/onePieceSpace)
			{
				pieceNeeded=Math.floor(spaceNeeded/onePieceSpace)
			}
			else
			{
				pieceNeeded=Math.floor(spaceNeeded/onePieceSpace)+1
			}
			this.totalDiscNum=pieceNeeded;
			onePieceWidth=Math.floor(width/pieceNeeded)
			errWidth=width-(onePieceWidth*pieceNeeded)
			lastPiecePercent=(spaceNeeded-((pieceNeeded-1)*onePieceSpace))/onePieceSpace
			lastPiecePercent=Math.floor(lastPiecePercent*100)
		}
		else
		{
			hddBgPersent=(spaceNeeded/total)*100
			tmpStr+='<ul style="width:'+width+'px; margin:0px; height:16px; background-image:url(images/progresswaiting.jpg); background-repeat:repeat-x;">'
			tmpStr+=this.getOnePieceShow(width,hddBgPersent,"")
			tmpStr+="</ul>"
			return tmpStr;
		}
		
		tmpStr+='<ul style="width:'+width+'px; margin:0px; height:16px; background-image:url(images/progresswaiting.jpg); background-repeat:repeat-x;">'
		for (i=0;i<pieceNeeded;i++)
		{
			if (errWidth>0)
			{
				errWidth=errWidth-1;
				addCount=1;
			}
			else
			{
				addCount=0;
			}
			
			if (i==pieceNeeded-1)
			{
				if (onePieceWidth<13)
				{
					tmpStr+=this.getOnePieceShow(onePieceWidth+addCount,lastPiecePercent,"")
				}
				else if (onePieceWidth<37)
				{
					tmpStr+=this.getOnePieceShow(onePieceWidth+addCount,lastPiecePercent,(i+1))
				}
				else
				{
					tmpStr+=this.getOnePieceShow(onePieceWidth+addCount,lastPiecePercent,"Disk"+(i+1))
				}
			}
			else
			{
				if (onePieceWidth<13)
				{
					tmpStr+=this.getOnePieceShow(onePieceWidth+addCount,100,"")
				}
				else if (onePieceWidth<37)
				{
					tmpStr+=this.getOnePieceShow(onePieceWidth+addCount,100,(i+1))
				}
				else
				{
					tmpStr+=this.getOnePieceShow(onePieceWidth+addCount,100,"Disk"+(i+1))
				}
			}
		}
		tmpStr+="</ul>"
		return tmpStr;
	}
	this.getOnePieceShow=function(width,percent,innerText)
	{
		var outStr;
		var lastShowWidth;
		lastShowWidth=(width*percent/100)-500;
		outStr='<li style="list-style:none; height:15px; font-size:12px; background-image:url(images/progressfinished.jpg); width:'+width+'px; border-left:1px solid #ffffff; text-align:center; float:left; line-height:15px;background-position-x:'+lastShowWidth+'px; background-repeat:no-repeat; overflow:hidden;">'+innerText+'</li>'
		return(outStr)
	}
}


/////////////////////numBox///////////////////////
//			构造  	(name,width,defaultNum,step,editable) 名字，宽度，默认数字，步长，是否可输入
//			方法		display(parentNode)			parentNode:父节点的名字或父对象
//			属性		minimumNum:最小值
//					maximalNum:最大值
/////////////////////////////////////////////
var numBox=function(name,width,defaultNum,step,editable)
{
	if(isNaN(parseInt(width)) || isNaN(parseInt(defaultNum))  || isNaN(parseInt(step)))
	{
		alert("Create numBox failed.");
		return;
	}
	this.randID=Math.floor(Math.random()*10000);
	this.CtrName=name;
	this.width=width;
	this.defaultNumber=defaultNum;
	this.step=step;
	this.editable=editable;
	this.boderColor="#666666";
	this.minimumNum=0;
	this.maximalNum="";
	
	this.display=function(parentNode)
	{
		var parentObject=null
		if(typeof(parentNode)=="string")
		{
			parentObject=document.getElementById(parentNode);
		}
		else if (typeof(parentNode)=="object")
		{
			parentObject=parentNode
		}
		else
		{
			alert("Object display failed!\nPlease specify the Parent Node.")
			return;
		}
		parentObject.cusObj=this;
		parentObject.innerHTML='<div style="float:left; width:20px;">'
								+'<input value='+this.defaultNumber+' id="'+this.randID+this.CtrName+'_input" type="text" name="textfield" style="height:20px; width:'+this.width+'px; border-bottom:1px solid #666666; border-left:1px solid #666666; border-right:0px; border-top:1px solid #666666; margin:0px; line-height:16px;"/>'
								+'</div>'
								+'<div style="float:left;border-bottom:1px solid #666666; border-right:1px solid #666666; border-left:0px; border-top:1px solid #666666; line-height:18px; height:18px; font-size:11px; margin-top:1px;">'
								+'	<div id="'+this.randID+this.CtrName+'_up_button" style="width:16; height:9px; background-image:url(numimages/num_up_arr.jpg); background-repeat:no-repeat; background-position-y:1px;"><img src="images/spacer.gif" width="1" height="1"/></div>'
								+'	<div id="'+this.randID+this.CtrName+'_down_button" style="width:16; height:9px; background-image:url(numimages/num_down_arr.jpg); background-repeat:no-repeat;background-position-y:1px;"><img src="images/spacer.gif" width="1" height="1"/></div>'
								+'</div>'
								
		document.getElementById(this.randID+this.CtrName+'_down_button').onclick=this.getDonwFunction(this)
		document.getElementById(this.randID+this.CtrName+'_up_button').onclick=this.getUpFunction(this)
	}
	
	this.getDonwFunction=function(obj)
	{
		return function()
		{
			var inputObj=document.getElementById(obj.randID+obj.CtrName+'_input');
			if (  isNaN(parseInt(inputObj.value))  )
			{
				return;
			}
			var currentNum=parseInt(inputObj.value);
			dstNum=currentNum-obj.step;
			if (dstNum<obj.minimumNum)
			{
				inputObj.value=obj.minimumNum
			}
			else
			{
				inputObj.value=dstNum;
			}
		}
	}
	
	this.getUpFunction=function(obj)
	{
		return function()
		{
			var inputObj=document.getElementById(obj.randID+obj.CtrName+'_input');
			if (inputObj.value=="")
			{
				inputObj.value=0;
			}
			if (  isNaN(parseInt(inputObj.value))  )
			{
				return;
			}
			var currentNum=parseInt(inputObj.value);
			dstNum=currentNum+obj.step;
			if (obj.maximalNum=="")
			{
				inputObj.value=dstNum;
			}
			else
			{
				if (dstNum>obj.maximalNum)
				{
					inputObj.value=obj.minimumNum
				}
				else
				{
					inputObj.value=dstNum;
				}
			}
		}
	}
}

///////////////numBox Class///////////////
//构造：(name,width,defaultNum,step,editable)
//				name:控件名字
//				width:宽度
//				defaultNum:默认值
//				step:步长
//				editable:是否可编辑
//
//方法	：display(parentNode)
//						parentNode:父节点的ID
//		：setValue(value)
//						value:改变的值
//		:getValue()	:得到当前的值
//属性：	minimumNum:最小值
//		maximalNum:最大值
//		value	:当前值
//事件：onChang()  :当值改变的时候触发
/////////////////////////////////////////

var numBox=function(name,width,defaultNum,step,editable)
{
	if(isNaN(parseInt(width)) || isNaN(parseInt(defaultNum))  || isNaN(parseInt(step)))
	{
		alert("Create numBox failed.");
		return;
	}
	this.randID=Math.floor(Math.random()*10000);
	this.CtrName=name;
	this.width=width;
	this.defaultNumber=defaultNum;
	this.step=step;
	this.editable=editable;
	this.boderColor="#666666";
	this.minimumNum=0;
	this.maximalNum="";
	this.value=defaultNum
	this.timeOutObj=null;
	this.onChange=function(){};
	
	this.display=function(parentNode)
	{
		var parentObject=null
		if(typeof(parentNode)=="string")
		{
			parentObject=document.getElementById(parentNode);
		}
		else if (typeof(parentNode)=="object")
		{
			parentObject=parentNode
		}
		else
		{
			alert("Object display failed!\nPlease specify the Parent Node.")
			return;
		}
		parentObject.cusObj=this;
		parentObject.innerHTML='<div style="float:left; width:20px;">'
								+'<input maxlength="12" value='+this.defaultNumber+' id="'+this.randID+this.CtrName+'_input" type="text" name="textfield" style="height:20px; width:'+this.width+'px; border-bottom:1px solid #666666; border-left:1px solid #666666; border-right:0px; border-top:1px solid #666666; margin:0px; line-height:16px;"/>'
								+'</div>'
								+'<div style="float:left;border-bottom:1px solid #666666; border-right:1px solid #666666; border-left:0px; border-top:1px solid #666666; line-height:18px; height:18px; font-size:11px; margin-top:1px;">'
								+'	<div id="'+this.randID+this.CtrName+'_up_button" style="width:16; height:9px; background-image:url(numimages/num_up_arr.jpg); background-repeat:no-repeat; background-position-y:1px;"><img src="images/spacer.gif" width="1" height="1"/></div>'
								+'	<div id="'+this.randID+this.CtrName+'_down_button" style="width:16; height:9px; background-image:url(numimages/num_down_arr.jpg); background-repeat:no-repeat;background-position-y:1px;"><img src="images/spacer.gif" width="1" height="1"/></div>'
								+'</div>'
								
		document.getElementById(this.randID+this.CtrName+'_down_button').onclick=this.getDonwFunction(this);
		document.getElementById(this.randID+this.CtrName+'_up_button').onclick=this.getUpFunction(this);
		document.getElementById(this.randID+this.CtrName+'_input').onkeydown=this.getKeydownFunction(this);
		document.getElementById(this.randID+this.CtrName+'_input').onpropertychange=this.getPropertyChangeFunction(this);
		document.getElementById(this.randID+this.CtrName+'_input').onpaste=function(){return false;}
		if (this.defaultNumber<=this.minimumNum)
		{
			document.getElementById(this.randID+this.CtrName+'_down_button').style.filter="Gray()";
		}
	}
	
	this.setValue=function(value)
	{
		if (value<this.minimumNum)
		{
			document.getElementById(this.randID+this.CtrName+'_input').value=this.minimumNum;
		}
		else if (this.maximalNum!="")
		{
			if (value>this.maximalNum)
			{
				document.getElementById(this.randID+this.CtrName+'_input').value=this.maximalNum;
			}
			else
			{
				document.getElementById(this.randID+this.CtrName+'_input').value=value;	
			}
		}
		else
		{
			document.getElementById(this.randID+this.CtrName+'_input').value=value;	
		}
	}
	
	this.getValue=function()
	{
		if (parseInt(this.value)<this.minimumNum)	
		{
			return 	(this.minimumNum*1);
		}
		
		if (parseInt(this.value)>this.maximalNum && this.maximalNum!="")
		{
			return (this.maximalNum*1);
		}
		return (this.value*1);
	}
	
	this.getPropertyChangeFunction=function(obj)
	{
		return function()
		{
			if(event.propertyName=="value")
			{
				var inputObj=document.getElementById(obj.randID+obj.CtrName+'_input');
				if (inputObj.value=="")
				{
					inputObj.value=0;
				}
				if ((inputObj.value+"")!=(parseInt(inputObj.value)+""))
				{
					inputObj.value=parseInt(inputObj.value);
				}
				clearTimeout(obj.timeOutObj);
				obj.timeOutObj=setTimeout(obj.checkInput(obj),1000);
			}
			obj.value=this.value;
			obj.onChange();
		}
	}
	
	this.checkInput=function(obj)
	{
		return function()
		{
			
			var inputObj=document.getElementById(obj.randID+obj.CtrName+'_input');
			if (parseInt(inputObj.value)<obj.minimumNum)
			{
				inputObj.value=obj.minimumNum;
			}
			else if (parseInt(inputObj.value)>obj.maximalNum && obj.maximalNum!="")
			{
				inputObj.value=obj.maximalNum;
			}
			
			document.getElementById(obj.randID+obj.CtrName+'_down_button').style.filter="";
			document.getElementById(obj.randID+obj.CtrName+'_up_button').style.filter="";
			if (parseInt(inputObj.value)==obj.minimumNum)
			{
				document.getElementById(obj.randID+obj.CtrName+'_down_button').style.filter="Gray()";
			}
			else if(parseInt(inputObj.value)==obj.maximalNum)
			{
				document.getElementById(obj.randID+obj.CtrName+'_up_button').style.filter="Gray()";
			}
		}
	}
	
	this.getKeydownFunction = function (obj)
	{
		return function()
		{
				return true;
				var code=event.keyCode;
				if ((code >=48 && code<=57) || (code >=96 && code<=105) || code ==8 || code ==13 || code ==37 || code ==39 || code ==9 || code ==46  || code ==35 || code ==36)
				{
					return true;
				}
				else
				{
					
					return false;
				}
		}
	}
	
	this.getDonwFunction=function(obj)
	{
		return function()
		{
			var inputObj=document.getElementById(obj.randID+obj.CtrName+'_input');
			if (  isNaN(parseInt(inputObj.value))  )
			{
				return;
			}
			var currentNum=parseInt(inputObj.value);
			dstNum=currentNum-obj.step;
			if (dstNum<=obj.minimumNum)
			{
				inputObj.value=obj.minimumNum;
				document.getElementById(obj.randID+obj.CtrName+'_down_button').style.filter="Gray()";
			}
			else
			{
				inputObj.value=dstNum;
				document.getElementById(obj.randID+obj.CtrName+'_up_button').style.filter="";
			}
		}
	}
	
	this.getUpFunction=function(obj)
	{
		return function()
		{
			var inputObj=document.getElementById(obj.randID+obj.CtrName+'_input');
			if (inputObj.value=="")
			{
				inputObj.value=0;
			}
			if (  isNaN(par