最近研究FCK,在\fckeditor\editor\css\behaviors目录下看到2个htc文件,好奇的打开看看,有的象js函数,有的又好像是标签之类的东西,以前都没见过,于是在网上搜了下。。。
一搜,90%以上的不是我想要的东西,HTC好像是一个手机名字,当然不是我想要的咯!然后在百度百科里看到了我想要的东西。摘录如下:(http://baike.baidu.com/view/972605.htm)
htc的全称就是Html Components,由微软在IE5.0后开始提供的一种新的指令组合,它可以把某种特定功能的代码封装在一个组件之中,从而实现了代码的重复使用,据说是用来代替activex和applet的.
从 Internet Explorer 5 开始引入了 HTML 组件的概念, HTML 组件也是 Internet Explore 5.5 一个革命性的突破。 Microsoft 的目的是用它取代 ActiveX 控件。HTML 组件是封装的对象,也像 ActiveX 控件一样是“自包含”的,可以在开发完后发布给任何人。HTC 文件并不仅仅是将一个 HTML 文件的扩展名换成 .htc,它含有脚本和 HTC 定制元素的集合。
在 HTML 文件中,HTC 拥有和页面中其他的 DHTML 元素一样的访问方式。这就意味着所有 HTC 元素都可以通过 id 属性在脚本中调用,也就是说 HTC 元素的属性、方法都可以通过脚本来进行灵活的运用。
您可以通过下面几种方式来执行 DHTML 行为:
定义属性和方法。在 HTC 中分别使用 PUBLIC:PROPERTY 和 PUBLIC:METHOD 元素来定义 HTC 的属性和方法。
定义事件:通过 EVENT 元素定义,使用元素的 fire () 方法在它们所在的页面里 引发这些事件。事件的环境可以通过 createEventObject () 方法设置。
在它们所在的页面里访问 DHTML 对象模型。HTC 中的 object 元素返回它所附属的元素, 通过这个对象,HTC 能访问他所在的文档及其对象模型 (属性、方法和事件)。
接受通报。当使用 ATTACH 元素时,浏览器向 HTC 通报标准 DHTML 事件和两个 HTC 专有 事件,oncontentready 和 ondocumentready。
以下是http://www.jzxue.com/Html/htmlcss/122220043287996.html上的一个例子:
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>
转载于:https://blog.51cto.com/huqianhao/955048