.htc组件改成js或jquery

begoodluck 发布于 2013/02/18 11:03
阅读 759
收藏 1

哪位了解htc组件的专家们,把下面这段htc组件翻写成js或jquery,小弟不胜感激!

<public:component tagName="Button" lightweight="false" >
<public:property name="value"  />
<public:property name="icon"  />
<public:property name="iconColor"  value="white"/>
<public:property name="Enable"  value="true"/>
<public:property name="Hasfocus"  value="true"/>
<public:property name="key"  />
<public:property name="action"  />
<public:property name="Width"  value="60px"/>
<public:property name="Height"  value="20px"/>
<public:property name="statusType" />
<public:property name="stopTime"/>
<public:property name="condDisp" value="true"/>
<public:property name="buttonMenu"/>

<public:attach event="oncontentready" onevent="f_Init()" />
<public:attach event="ondocumentready" onevent="f_PostInit()" />
<public:attach event="onselectstart" onevent="f_CancelEvent()" />
<public:attach event="onfocus" onevent="f_Focus()" />
<public:attach event="onblur" onevent="f_Blur()" />
<public:attach event="onpropertychange" onevent="f_PropChange()" />

<public:defaults tabStop=true contentEditable=false canHaveHTML=false viewInheritStyle=false viewMasterTab=false  style="overflow:hidden"/>
</public:component>

<script>
var _active=false;
var _InInit = false;  //是否初始化完成
var _initTime = null;

function f_Init() {
 initTable();
 button.accessKey = element.key;
 button.style.fontSize = "9pt"
 if(element.Enable==true || element.Enable.toUpperCase()=="TRUE"){
  button.attachEvent("onmouseover",mouseHover);
  button.attachEvent("onmouseout",mouseOut);
  button.attachEvent("onblur",mouseBlur);
  button.attachEvent("onclick",mouseOnclick);
  
  if(element.Hasfocus=="true") button.attachEvent("onfocus",mouseFocus);
  else button.attachEvent("onfocus",noFocus);
 }
 else {
  drawButton("disable");
  button.disabled = true;
 } 
 sizeTable();
 button. innerHTML = ButtonText();
 buttonTable.height= Height;
 buttonTable.width = Width;
 button.style.height =buttonTable.height-2;
 button.style.width = buttonTable.width-2;
 element.style.height = element.Height;
 defaults.viewLink = document;
 _InInit = true;
}

function f_PostInit() {
 //if(!_InInit) alert("初始化失败");
}

function f_CancelEvent()
{
    event.returnValue = false;
}

function f_Focus() {
 if(element.Enable==true || element.Enable.toUpperCase() =="TRUE"){
  _active = true;
  button.focus();
 }
}

function f_Blur() {
 _active = false;
 button.blur();
}

function drawButton(state) {
 switch(state) {
  case "hover":{
   img_00.style.display = "none";
   img_10.style.display = "none";
   img_20.style.display = "none";
   img_30.style.display = "none";
   img_40.style.display = "none";
   img_50.style.display = "none";
   img_60.style.display = "none";
   img_70.style.display = "none";
   img_80.style.display = "none";

   img_01.style.display = "block";
   img_11.style.display = "block";
   img_21.style.display = "block";
   img_31.style.display = "block";
   img_41.style.display = "block";
   img_51.style.display = "block";
   img_61.style.display = "block";
   img_71.style.display = "block";
   img_81.style.display = "block";
   break;
  }
  case "default":{
   img_00.style.display = "block";
   img_10.style.display = "block";
   img_20.style.display = "block";
   img_30.style.display = "block";
   img_40.style.display = "block";
   img_50.style.display = "block";
   img_60.style.display = "block";
   img_70.style.display = "block";
   img_80.style.display = "block";

   img_02.style.display = "none";
   img_12.style.display = "none";
   img_22.style.display = "none";
   img_32.style.display = "none";
   img_42.style.display = "none";
   img_52.style.display = "none";
   img_62.style.display = "none";
   img_72.style.display = "none";
   img_82.style.display = "none";

   img_01.style.display = "none";
   img_11.style.display = "none";
   img_21.style.display = "none";
   img_31.style.display = "none";
   img_41.style.display = "none";
   img_51.style.display = "none";
   img_61.style.display = "none";
   img_71.style.display = "none";
   img_81.style.display = "none";
   break;
  }
  case "active" :{
   img_00.style.display = "none";
   img_10.style.display = "none";
   img_20.style.display = "none";
   img_30.style.display = "none";
   img_50.style.display = "none";
   img_60.style.display = "none";
   img_70.style.display = "none";
   img_80.style.display = "none";

   img_01.style.display = "none";
   img_11.style.display = "none";
   img_21.style.display = "none";
   img_31.style.display = "none";
   img_51.style.display = "none";
   img_61.style.display = "none";
   img_71.style.display = "none";
   img_81.style.display = "none";

   img_02.style.display = "block";
   img_12.style.display = "block";
   img_22.style.display = "block";
   img_32.style.display = "block";
   img_52.style.display = "block";
   img_62.style.display = "block";
   img_72.style.display = "block";
   img_82.style.display = "block";
   break;
  }
  case "disable": {
   img_40.style.display = "none";
   img_41.style.display = "none";
   img_42.style.display = "block";

  }
 }
}

function mouseHover() {
 if(_active == true)
  return;
 else drawButton('hover');
 
  if(element.buttonMenu){
 with(window)  eval(element.buttonMenu);
  }
}

function mouseOut() {
 if(_active == true)
  return;
 else drawButton("default");
 //if(element.buttonMenu){
  //with(window) eval(hide());
 //}
}

function mouseFocus() {
 drawButton("active"); 
}

function mouseBlur() {
 drawButton("default"); 
}

function mouseOnclick() {
 if(element.action){
  with(window) eval(element.action);
 }
 time = element.stopTime; 
 _initTime=time;

 if(_initTime != null){
  element.Enable="false";
     window.setTimeout(buttonLazy, _initTime*1000);  
 } 

 if(element.buttonMenu){
//  alert(element.getBoundingClientRect().top);
  with(window)  eval(element.buttonMenu);
 }
}


function buttonLazy(){
 element.Enable="true";
}

function ButtonText()
{
 var iHtml = f_DrawIcon();
 //iHtml += element.value;
 if (element.value) {
  iHtml += element.value.replace(/</g,"&lt;");
 }
 return iHtml;
}

function f_DrawIcon () {
 var filterText = "";
 if(icon=="" || icon==null) return "";
 var oImg = document.createElement("img");
 oImg.src = icon;
 if( iconColor !="")
 {
  filterText += "filter:chroma(color = " + iconColor + ");";
 }
 if(Enable.toLowerCase()=="false")
  filterText += "filter:gray";
 oImg.style.cssText = filterText;
 oImg.border = 0;
 oImg.hspace = 4;
 oImg.align = "absMiddle";
 return oImg.outerHTML;
}

function f_PropChange(){
    switch (event.propertyName){
 case "iconColor":
 case "icon":
    case "value":
  onTextChange();
  break;
 case "Hasfocus":
  onEnabledFocusChange();
  break;
 case "Enable":
  onEnabledChange();
  break;
    }
}
function noFocus() {
 button.blur();
}

function onTextChange(){
 button.innerHTML = ButtonText();
}

function onEnabledFocusChange(){
 if(element.Hasfocus.toLowerCase()=="false"){
  button.attachEvent("onfocus", f_NoFocus);
 }
 else
  button.detachEvent("onfocus", f_NoFocus);
}

function onEnabledChange(){
 if(element.Enable.toLowerCase()=="false"){
  button.disabled = true;
  drawButton("disable");
  button.onmouseover = null;
  button.onmouseout = null;
  button.onmousedown = null;
  button.onmouseup = null;
     button.onclick=null;
  if(icon !="") onTextChange();
  button.detachEvent("onclick", mouseOnclick);
 }
 else{
  button.disabled = false;
  drawButton("default");
  button.attachEvent("onmouseover",mouseHover);
  button.attachEvent("onmouseout",mouseOut);
  button.attachEvent("onblur",mouseBlur);
  if(element.Hasfocus=="true") button.attachEvent("onfocus",mouseFocus);
  else button.attachEvent("onfocus",noFocus);
  if(icon !="") onTextChange();
  button.attachEvent("onclick",mouseOnclick);
 }
}

function initTable() {
 var td=document.getElementsByTagName("td");  
 if(element.condDisp == "false"){
  element.style.display = "none";
 }
 for(var i=0;i<td.length;i++){
  //if(i!=4){
   for(var j=0;j<3;j++){
    var img=document.createElement("img");
    img.id="img_"+i+j;
    img.style.height = "100%";
    img.style.width = "100%";
    if(j!=0) img.style.display = "none";
    img.src = Coral_Library_path +"images/WinXP/images/"+i+j+".gif";
    td[i].appendChild(img)
   }
  //}
  //else {
  // for(var k=0;k<3;k++){
  //  var img=document.createElement("img");
  //  img.id="img_"+i+k;
  //  img.style.height = "100%";
  //  img.style.width = "100%";
  //  if(k!=0) img.style.display = "none";
  //  img.src = Coral_Library_path +"images/WinXP/images/"+i+k+".gif";
  //  td[i].appendChild(img)
  // }
  //}
 }
}

function sizeTable(){
 if(Coral_Library_path.indexOf("styles/apple/")!=-1){
  td1.height=td2.height=td3.height=td7.height=td8.height=td9.height="7px";
  td4.width="8px";
  td4.height="4px";
  td6.width="8px";
 }
}
</script>
<body leftmargin="0" topmargin="0" >
<BUTTON id="button" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: 1px; FILTER: chroma(color=white); MARGIN-LEFT: 1px; BORDER-LEFT: 0px;  BORDER-BOTTOM: 0px; POSITION: absolute; BACKGROUND-COLOR: white" ></BUTTON>
<TABLE id="buttonTable" cellSpacing=0 cellPadding=0  border=0 >
<TBODY>
<TR>
<TD  width="8" height="3" id="td1"></TD>
<TD width="100%" height="3" id="td2"></TD>
<TD width="8" height="3" id="td3"></TD></TR>
<TR>
<TD width="3" height="100%" id="td4"></TD>
<TD width="100%" height="100%" id="td5"></TD>
<TD width="3" height="100%" id="td6"></TD>
</TR>
<TR>
<TD width="8" height="3" id="td7"></TD>
<TD width="100%" height="3" id="td8"></TD>
<TD  width="8" height="3" id="td9"></TD></TR>
</TBODY>
</TABLE>
</body>

 

加载中
返回顶部
顶部