(1) 初探 HTML 组件 - HTC 概述
从 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。
(2) 初探 HTML 组件 - 创建一个 HTC
创建一个 HTC
下面通过创建一个鼠标滑过加亮显示的 HTC 来演示一下创建 HTC 的过程。 1、创建 HTC 文件的架构。一个标准的 HTC 文件含有一个 SCRIPT 块和一对可选的 COMPONENT 标记。
<PUBLIC:COMPONENT>
<SCRIPT>
</SCRIPT>
</PUBLIC:COMPONENT>
2、写一个可执行的脚本。
在下面的代码中，ATTACH 被用于设置 HTC 接收元素在 onmouseover 和 onmouseout 事件被触发的消息。它通知 HTC 通过切换颜色来体现鼠标滑过元素时的加亮效果。
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Restore()" />
<SCRIPT LANGUAGE="JScript">
var normalColor, normalSpacing;
function Hilite()
{
// save original values
normalColor = runtimeStyle.color;
normalSpacing= runtimeStyle.letterSpacing;
runtimeStyle.color = "red";
runtimeStyle.letterSpacing = 2;
}
function Restore()
{
// restore original values
runtimeStyle.color = normalColor;
runtimeStyle.letterSpacing = normalSpacing;
}
</SCRIPT>
</PUBLIC:COMPONENT>
注意：您可以直接使用属性、方法或者是事件的名称来访问它们，并不需要在前面加上 element 的前缀。在前面的例子中我们注意到在切换颜色时我们直接调用了 runtimeStyle ，而不是使用 element.runtimeStyle。
3、一旦执行，这个 HTC 就能在网页中应用来达到鼠标滑过加亮的效果。
<HEAD>
<STYLE>
LI {behavior:url(hilite.htc)}
</STYLE>
</HEAD>
<P>Mouse over the two list items below to see this effect.
<UL>
<LI>HTML Authoring</LI>
<LI>Dynamic HTML</LI>
</UL>
(3) 初探 HTML 组件 - 定义方法
定义方法
我们可以使用 PUBLIC:METHOD 元素来定义 HTC 的方法集，如下例所示：
<PUBLIC:METHOD NAME="startFlying" />
当我们定义了一个方法后，我们就可以在 HTC 中直接来调用它。请看下面的例子：
<PUBLIC:METHOD NAME="tick" />
<PUBLIC:METHOD NAME="startFlying" />
:
<SCRIPT LANGUAGE="JScript">
var currCount;
var flyCount;
var flying;
var msecs;
var oTop, oLeft;
msecs = 50;
flyCount = 20;
flying = false;
runtimeStyle.position = "relative";
runtimeStyle.visibility = "hidden";
window.attachEvent("onload", onload);
function onload()
{
// delay commences from the window.onLoad event
if (delay != "none")
{
window.setTimeout(uniqueID+".tick()", delay);
}
}
function tick()
{
if (flying == false)
{
startFlying();
}
else
{
doFly();
}
}
function startFlying()
{
if (fromX==null && fromY==null)
{
if (from=="top")
{
runtimeStyle.posTop = -offsetTop-offsetHeight;
}
else if (from=="bottom")
{
runtimeStyle.posTop = element.document.body.clientHeight;
}
else if (from=="right" )
{
runtimeStyle.posLeft = element.document.body.clientWidth;
}
else
{
runtimeStyle.posLeft = -offsetLeft-offsetWidth;
}
}
else
{
runtimeStyle.posTop = fromY;
runtimeStyle.posLeft = fromX;
}
runtimeStyle.visibility = "visible";
flying = true;
oTop = runtimeStyle.posTop;
oLeft = runtimeStyle.posLeft;
currCount = 0;
doFly();
}
function doFly()
{
var dt, dl;
currCount++;
dt = oTop / flyCount;
dl = oLeft / flyCount;
runtimeStyle.posTop -= dt;
runtimeStyle.posLeft -= dl;
if (currCount < flyCount)
{
window.setTimeout(uniqueID+".tick();", msecs);
}
else
{
runtimeStyle.posTop = 0;
runtimeStyle.posLeft = 0;
flying = false;
evObj = createEventObject();
evObj.setAttribute("resulty", uniqueID);
finished.fire(evObj);
}
}
</SCRIPT>
(4) 初探 HTML 组件 - 定义事件
<p><b>定义事件</b>
<p>要在 HTC 中定义一个事件，我们需要用到 PUBLIC:EVENT 元素。当我们定义了一个事件后，我们就可以在 HTC 的所在页中来调用它。
<p>在下面的例子中来示范如何实现一个计算器的功能。在 HTC 中我们使用 EVENT 元素定义了一个 onResultChange 事件。当在所在页中激活 onResultChange 事件时，HTC 将计算出结果并返回到所在页。
<xmp>
<PUBLIC:EVENT NAME=onResultChange ID=rcID />
<SCRIPT LANGUAGE="JScript">
:
oEvent = createEventObject();
oEvent.result = sResult;
rcID.fire (oEvent);
:
</SCRIPT>
</xmp>
<p>下面是含有这个 HTC 的页面：
<xmp>
<HTML XMLNS:InetSDK>
<HEAD>
<TITLE>Calculator Sample</TITLE>
<STYLE>
INPUT {font-family: Courier New}
@media all {
InetSDK:CALC {behavior:url(Engine.htc)}
}
</STYLE>
<LINK REL="stylesheet" HREF="/workshop/basicSDKIE4.css" TYPE="text/css">
</HEAD>
<BODY BGCOLOR="<BLOCKQUOTE class="body">
<P>
<InetSDK:CALC id="myCalc" onResultChange="resultWindow.innerText =window.event.result">
<TABLE>
<TR>
<TD COLSPAN=5>
<DIV ID="resultWindow" STYLE="padding:5; background-color:buttonface" ALIGN="RIGHT">0.</DIV>
</TD>
</TR>
<TR>
<TD><INPUT TYPE=BUTTON VALUE=" 7 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" 8 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" 9 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" / "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" C "></TD>
</TR>
<TR>
<TD><INPUT TYPE=BUTTON VALUE=" 4 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" 5 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" 6 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" * "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" % " DISABLED></TD>
</TR>
<TR>
<TD><INPUT TYPE=BUTTON VALUE=" 1 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" 2 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" 3 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" - "></TD>
<TD><INPUT TYPE=BUTTON VALUE="1/x" DISABLED></TD>
</TR>
<TR>
<TD><INPUT TYPE=BUTTON VALUE=" 0 "></TD>
<TD><INPUT TYPE=BUTTON VALUE="+/-"></TD>
<TD><INPUT TYPE=BUTTON VALUE=" . "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" + "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" = "></TD>
</TR>
</TABLE>
</InetSDK:CALC>
</BLOCKQUOTE>
</BODY>
</HTML>
</xmp>
<p>
注意：本文的所有例子都需要在 IE5 以上版本的浏览器中才能看到应有的效果。
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
