CSS中的行为——HTC

【 tulaoshi.com - Web开发 】

最近对这些CSS中的行为有点兴趣，看了些文档作了个表单鼠标滑过效果。当然HTC的用途，大家最喜欢的要数自制组建，自定义标签了。

Quote

说明:

HTC是HTML component的缩写, 是IE5.0的主要扩展之一, 除了具备一般组件的可重用优点之外, 还具有易于开发使用等优点, 因为需要引入外部文件,这里就不举例了,宝库里有例子.

控件和组件

HTC提供了一个简单机制以在脚本中实现DHTML行为。一个HTC文件和HTML文件没有任何差别，并且以“.htc”为后缀。
关于demo，我看到一些表单的输入框，有鼠标滑过效果，或者背景变色或者边框变色。使用:hover很容易实现，可惜MS IE7以前的浏览器不能支持，那么就单独给IE5.+使用HTC定义鼠标行为。其实这个实用JS实现也挺容易，我就想拿HTC练练手。先看看效果？

下面是代码

XHTML结构来自ALA的Prettier Accessible Forms。这里多说一嘴，建议大家以后做表单的时候多采用下面的结构，Strict型xhtml建议 以下是引用片段：
form下不可以直接放置表单元素。而用ol来组织多个表单也是合理的。fieldset
 legendDelivery Details/legend
 ol
 li
 label for="name"Nameem*/em/label
 input id="name" /
 /li
 li
 label for="address1"Addressem*/em/label
 input id="address1" /
 /li
 li
 label for="address2"Address 2/label
 input id="address2" /
 /li
 li
 label for="town-city"Town/City/label
 input id="town-city" /
 /li
 li
 label for="county"Countyem*/em/label
 input id="county" /
 /li
 li
 label for="postcode"Postcodeem*/em/label
 input id="postcode" /
 /li
 li
 fieldset
 legendIs this address also your invoice »
address？em*/em/legend
 labelinput type="radio" »
name="invoice-address" / Yes/label
 labelinput type="radio" »
name="invoice-address" / No/label
 /fieldset
 /li
 /ol
/fieldset
HTC：input.htcPUBLIC:COMPONENT
PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" /
PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Restore()" /
SCRIPT LANGUAGE="JScript"
!--
 function Hilite()
 {
 // save original values
 element.style.border = "1px #f60 solid";
 element.style.background = "#f5f5f5";
 }

 function Restore()
 {
 // restore original values
 element.style.border = "1px #ccc solid"; 
 element.style.background = "#fff";
 }
--
/SCRIPT
/PUBLIC:COMPONENT

CSS

以下是引用片段：
style type="text/css"
!--
*{color:#666; font-size:11px;font-family:Arial, Helvetica, sans-serif;}
body{text-align:center;}
  fieldset{border:1px #eee solid; width:310px; margin:0 auto; padding:8px; text-align:left;}
    legend{padding:4px;}
    fieldset label{float:left; width:70px; text-align:right;padding:0 10px;}
    fieldset ol{list-style:none; margin:0; padding:0;}
    fieldset ol li{clear:both; line-height:20px;}
    fieldset ol li fieldset{width:280px;}
    input{behavior:url(input.htc); border:1px #ccc solid; background:#fff; width:160px;}/*Only for ie 5.0+*/
    label input{width:14px;height:14px;border:0;} /*For input type is Radio*/
    input:hover{border:1px #f60 solid;background:#f5f5f5;}/*For orther browsers*/
    em{color:#ff0000;}
--
/style