天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件 > 网页>新闻>CSS中的行为——HTC

CSS中的行为——HTC

greengnn's space2006-07-03 15:26我要吐槽
最近对这些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>
    CSS中的行为——HTC——欢迎访问天极软件CSS教程专区
作者:龙犊责任编辑:龙犊)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]
手机整机DIY企业级