CSS中的行为—HTC-CSS教程-爱易网页

CSS中的行为—HTC

日期：2013-10-11　浏览次数：21478 次

最近对这些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>
<legend>Delivery Details</legend>
<ol>
<li>
<label for="name">Name<em>*</em></label>
<input id="name" />
</li>
<li>
<label for="address1">Address<em>*</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">County<em>*</em></label>
<input id="county" />
</li>
<li>
<label for="postcode">Postcode<em>*</em></label>
<input id="postcode" />
</li>
<li>
<fieldset>
<legend>Is this address also your invoice »
address?<em>*</em></legend>
<label><input type="radio" »
name="invoice-address" /> Yes</label>
<label><input type="radio" »
name="invoice-address" /> No</label>
</fieldset>
</li>
</ol>
</fieldset>

HTC：input.htc

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Restore()" />
<SCRIPT LANGUAGE="JScript">

</SCRIPT>
</PUBLIC:COMPONENT>

CSS

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

CSS中的行为—HTC

相关资料更多>

推荐阅读更多>