button.htc

HTC,demo WEB用于。 超大型

<public:component name="Button" urn="Button" >
<public:property name="caption" get="getCaption" put="putCaption"/>
<public:property name="bindClick" put="putBindClick"/>
<public:property name="left" value="0"/>
<public:property name="top" value="0"/>
<public:property name="width" value="50"/>
<public:property name="height" value="19"/>
<public:property name="init" put="initialize"/>
<public:property name="readOnly" put="putReadOnly" get="getReadOnly"/>
<public:property name="refresh" put="refresh"/>

<script language="JavaScript">
<!--
var vColor;
var objBg,objTextBg; //整个按钮的背景块和文字区域的背景块
var objCaption,vCaption = ""; //包含标题文字的div和其中的标题
var bFocus;
var vHandle,vReadOnly;

function getCaption(){ return vCaption; }

function putCaption(argCaption){
	vCaption = argCaption;
	if(objCaption) objCaption.innerText = vCaption;
}

function putBindClick(argHandle){	
  
	if(typeof(vReadOnly) == "undefined" || vReadOnly.toString().toLowerCase() != "true") element.onclick = argHandle;
	vHandle = argHandle; //缓存一下以便解除只读时恢复
}

function getReadOnly(){
	return eval(vReadOnly);
}

function putReadOnly(argBool){
	var vReadOnlyTemp = argBool.toString().toLowerCase();

	if(vReadOnlyTemp == vReadOnly) return;
    vReadOnly = vReadOnlyTemp;
	if(vReadOnly == "true"){
		objCaption.runtimeStyle.color = "#CCCCCC";
		
		with(element){
			onmouseover = noResponse;
			onmouseout = noResponse;
			onmousedown = noResponse;
			onmouseup = noResponse;
		}
		element.onclick = noResponse;
	}
	else{
		objCaption.runtimeStyle.color = "";
		with(element){
			onmouseover = over;
			onmouseout = out;
			onmousedown = down;
			onmouseup = up;
		}		
		
		if(vHandle) 
		  element.onclick = vHandle;
	}
}

function over(){ //鼠标over按钮的动作
	overBg();
	overTBg();
}

function out(){ //鼠标out按钮的动作
	if(bFocus){ //得到焦点再离开
		focusBg();
		overTBg();
	}
	else{ //未得到焦点就离开
		normalBg();
		normalTBg();
	}
}

function down(){ //鼠标按下按钮的动作
	bFocus = true; //得到焦点
	downBg();
	downTBg();
	window.document.attachEvent("onmousedown",lostFocus);
}

function up(){ //onmouseup的动作
	overBg();
	overTBg();
}

function lostFocus(){ //失去焦点的行为
	var objSrc = window.event.srcElement;

	try{
		if(element.contains(objSrc)) return;
		bFocus = false; //失去焦点
		normalBg();
		normalTBg();
	}
	catch(err){
		return;
	}
	window.document.detachEvent("onmousedown",lostFocus);
}

function normalBg(){ //按钮背景普通无选择样式
	objBg.fillcolor = "#d1cec1";
	objBg.fill.color2.value = "#ffffff";
	objBg.fill.colors.value = "20% #E7E7E7,25% #FFFBF7";
	//setColors(objBg,"20% #F7F7EF,90% #FFFBF7");
}

function normalTBg(){ //文本背景普通无选择样式
	objTextBg.style.visibility = "hidden";
}

function focusBg(){ //按钮背景得到焦点选择样式
	objBg.fillcolor = "#6b82ef";
	objBg.fill.color2.value = "#bdd7f7";
}

function overBg(){ //鼠标over时按钮背景的选择样式
	objBg.fillcolor = "#e79600";
	objBg.fill.color2.value = "#ffdb8c";
	objBg.fill.colors.value = "";
}

function overTBg(){ //鼠标over时文本背景的样式
	objTextBg.style.visibility = "visible";
	objTextBg.fillcolor = "#efebe7";
	objTextBg.fill.color2.value = "#ffffff";
}

function downBg(){ //鼠标按下后按钮背景的选择样式
	objBg.fillcolor = "#f7f3ef";
	objBg.fill.color2.value = "#cac3bb";
	
}

function downTBg(){ //鼠标按下后文本背景的样式
	bFocus = true;
	objTextBg.fillcolor = "#e7e3de";
	objTextBg.fill.color2.value = "#e7e3de";
}

function noResponse(){    
	window.event.cancelBubble = true;
	window.event.returnValue = false;	
}

function refresh(){
	var i;
	with(element){
		style.pixelLeft = left;
		style.pixelTop = top;
		style.pixelWidth = width;
		style.pixelHeight = height;
	}

	with(objCaption){ //包含按钮标题的div对象
		style.pixelWidth = width - 8;
		style.pixelHeight = height;
		style.paddingTop = height - 15;//设置在对象和内容的顶部边框之间插入间隔（这里指div和它之间内容）
		innerText = vCaption;
	}
	normalBg();
	normalTBg();
}

function initialize( vInit ) {
	var vVML;
	bFocus = false; //指示按钮是否得到焦点
	element.style.visibility = "hidden";

	//生成组成按钮的三个element的子对象
	vVML = "<v:roundrect class='sc_btn_bg' arcsize='0.1' strokeweight='1px' style='width:" + width + ";height:" + height + ";' strokecolor='#003C73'><v:fill type='gradient'/></v:roundrect>";
	vVML += "<v:rect class='sc_btn_txtbg'  stroked='true' strokecolor='#f3efec' style='width:" + (parseInt(element.width) - 6) + ";height:" + (parseInt(element.height) - 6) + ";'><v:fill type='gradient'/></v:rect>";
	vVML += "<?xml:namespace prefix='v' ns='schemas-microsoft-com:vml'/>";
	element.insertAdjacentHTML("beforeEnd",vVML);

	objBg = element.children(0); //按钮背景
	objTextBg = element.children(1); //文字背景
	objCaption = window.document.createElement("<div class='sc_btn_text'</div>"); //包含按钮标题的按钮
	objCaption = element.appendChild(objCaption);

	refresh(); //主要是element和objCaption的属性赋值
	readOnly = false;
	element.style.visibility = "visible";
	if(vInit != "-1" ){ 
	  element.style.zIndex = -1;   
  }
}
//-->
</script>
</public:component>