CSS中HTC应用实例

HTC扩展名为.htc是利用DHTML编写出来的,把代码与表现形式分离开来.网络上的应用比较少见,特写下如下实例以供以后回忆.

实现目的:

一个TextBox輸入框,autoComplete=on的时候,如果选择AUTOCOMPLETE的文字,就有可能不会触发onchange事件,我们要改变这种情况

另我们要在这个TextBox的hover和out 事件时能够改变样式.

好了,代码如下:

首先是新增一个文件,命名为Handle.htc

包含代码如下:

 

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onpropertychange" HANDLER="onvaluechange" />
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Restore()" />

<SCRIPT>
function onvaluechange()
{
    if("value"==event.propertyName)
    {
        element.fireEvent("onchange");
     }
}
 function Hilite()
  {
     element.style.border = "1px #f60 solid";
     element.style.background = "#f5f5f5";
  }
 function Restore()
  {
     element.style.border = "1px #ccc solid"; 
     element.style.background = "#fff";
  }

</SCRIPT>
</PUBLIC:COMPONENT>

 

第二步就是给TextBox添加style

 

Code " onpropertychange " ,  " dosomething(this) " );
TextBox1.Style.Add( " behavior " , " url(Handle.htc); " ); // vs2005

 

上面代码,第一句是添加onpropertychange事件,第二句是添加Style

很简单吧