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>
<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
很简单吧
