DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS中的行為——HTC
CSS中的行為——HTC
編輯:CSS進階教程     
最近對這些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;}/*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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved