|
作者的blog: www.jluvip.com/blog/
最近對(duì)這些CSS中的行為有點(diǎn)興趣，看了些文檔作了個(gè)表單鼠標(biāo)滑過效果。當(dāng)然HTC的用途，大家最喜歡的要數(shù)自制組建，自定義標(biāo)簽了。
Quote
說明:
HTC是HTML component的縮寫,
是IE5.0的主要擴(kuò)展之一,
除了具備一般組件的可重用優(yōu)點(diǎn)之外,
還具有易于開發(fā)使用等優(yōu)點(diǎn),
因?yàn)樾枰胪獠课募?這里就不舉例了,寶庫里有例子.
控件和組件
HTC提供了一個(gè)簡單機(jī)制以在腳本中實(shí)現(xiàn)DHTML行為。一個(gè)HTC文件和HTML文件沒有任何差別，并且以“.htc”為后綴。
關(guān)于demo，我看到一些表單的輸入框，有鼠標(biāo)滑過效果，或者背景變色或者邊框變色。使用:hover很容易實(shí)現(xiàn)，可惜MS IE7以前的瀏覽器不能支持，那么就單獨(dú)給IE5.+使用HTC定義鼠標(biāo)行為。其實(shí)這個(gè)實(shí)用JS實(shí)現(xiàn)也挺容易，我就想拿HTC練練手。先看看效果？
下面是代碼
XHTML結(jié)構(gòu)來自ALA的Prettier Accessible Forms。這里多說一嘴，建議大家以后做表單的時(shí)候多采用下面的結(jié)構(gòu)，Strict型xhtml建議<form>下不可以直接放置表單元素。而用<ol>來組織多個(gè)表單也是合理的。
<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>
出處：藍(lán)色理想
責(zé)任編輯：moby
◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論
|
