CSS中的行為——HTC

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> 最近對這些 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">

<!--

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;}

label input{width:14px;height:14px;border:0;}

input:hover{border:1px #f60 solid;background:#f5f5f5;}

em{color:#ff0000;}

-->

</style>

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>