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

很簡單吧