IE里的探索之创建具有良好行为的自定义元素
(作者:青苹果工作室编译 2001年02月08日 13:28)
本文描述如何使用脚本和 HTML 创建你自己的 DHTML 元素行为,以用于 DHTML 页面。Microsoft Internet Explorer 5.5 为动态 HTML (DHTML) 开发者提供了令人兴奋的新功能。我们将讨论在 DHTML 页面中使用脚本和 HTML 创建你自己的 DHTML 元素行为。开始讨论前,我们来看看元素行为的一些背景知识。
元素行为与 Internet Explorer 5.0 所支持的行为不同,它真正实现了自定义元素。自定义元素和我们现在称为附着行为的概念是在 Internet Explorer 5.0 中引入的,它们使你能使用 XML 语法在 HTML 文档中添加自定义元素,如 <VEG:TURNIP>。随后,可以使用 CSS behavior 属性或 addbehavior() 方法在它或其它元素上附着行为。 这样做的缺点是,当 behavior 属性被重新定义时附着的行为就会被分离而新的行为不会立刻附着。为解决这个问题,在 IE5.5 引入了对我们称为元素行为的支持,它永久地、不能撤销地绑定在自定义元素上。这里我们需要说明,当你想要在 HTML 文档中添加专有元素时,附着行为还是有用处的;但当自定义元素时,明确建议的方法是元素行为。
开始我们的行为
现在我们开始建立自己的可靠的自定义行为计划。
关于 DHTML 元素行为,我们选择开发一个 include 标记,它将一个文本文件作为 DHTML 页面的一部分包含进来。元素行为可以提供比这更强大的功能,但从本文的目的出发,我们的选择能使我们集中考虑元素行为的核心功能。
我们从一个 HTML 组件 (HTC) 文件实现的很简单的元素行为开始。请看 include1.htc:
<PUBLIC:COMPONENT tagname="include">
<PUBLIC:ATTACH event="oncontentready" onevent="init();" />
</PUBLIC:COMPONENT>
<SCRIPT>
function init()
{
window.status="Include has been initialized";
}
</SCRIPT>
这里标记名 include 在行为元素 public:component 中指明。看一下使用这个元素行为的 includedemo1.htm:
<HTML XMLns:MYNS >
<HEAD>
<?IMPORT namespace="MYNS" implementation="include1.htc">
</HEAD>
<BODY>
This HTML file uses the include element to include a block of
text from another file in an HTML page. Here is the included content
of the include.htc file:
<BR>
<MYNS:INCLUDE />
<BR>
This text comes after the included file:
</BODY>
</HTML>
这里我们看到了在 <HTML> 标记里为自定义元素定义的命名空间和 IMPORT 处理指令,它告诉我们可以在哪里找到我们的元素行为。现在,这个元素行为什么也不做,所以我们在行为中放置了脚本以便在初始化时在状态栏里写一些文本。这是一个用的调试技巧;这里它确认了我们的行为已经被实例化。
在我们进一步开始给我们的行为添加有用的功能之前,我们暂停一下来看看这里发生了什么。浏览器对使用了我们自定义元素的 HTML 文件进行语法分析时,它遇到了IMPORT 处理指令。处理指令比你想象的要好得多,它们处理指令。它们和被当作文档的一部分的 HTML 元素内容不同。处理指令有指令执行,完毕前停止一切语法分析的作用。在我们的例子中,IMPORT 的作用是说明在我们刚才在 <HTML> 标记里定义的命名空间 MYNS 中,有一个对标记名的实现。标记名由此实现所定义即 HTML 组件 .htc 文件;遇到 IMPORT 时 HTML 语法分析器确保随后在 HTML 文档中遇到适当的标记时实现可用 (技术上,我们称之为实例化)。实际上的效果就是当 HTML 语法分析器遇到 <MYNS:INCLUDE> 元素时,将依照文档中已创建的元素创建相同的元素行为。
另外需要注意的是我们的元素 <MYNS:INCLUDE /> 属于我们所说的无域元素。这就是说它在标记明后有一个结束符 /,并且 HTML 语法分析器不需要寻找等价的 </MYNS:INCLUDE>。我们也可以使用以下同样有效的标记结构,以便知道 non-element 的浏览器能处理提示内容:
<MYNS:INCLUDE> this is where the included content would be displayed if you were using Internet Explorer 5.5 </MYNS:INCLUDE>
行为的内容
现在我们有了一个基本的元素行为,下一步就是显示一些内容。我们使用 Internet Explorer 5.5 中的新功能 ViewLink,它使我们能在一个单独的文档片段中显示 HTML 内容。我们来看 include2.htc:(你需要通过 includedemo2.htm 看它是如何工作的,它的唯一不同之处是元素行为implementation 引用的 .htc 文件)
<HTML>
<PUBLIC:COMPONENT tagname="include">
<PUBLIC:DEFAULTS viewLinkContent="true" />
<PUBLIC:ATTACH event="oncontentready" onevent="init();" />
</PUBLIC:COMPONENT>
<SCRIPT>
function init()
{
window.status="Include has been initialised";
}
</SCRIPT>
<BODY>
Here's some ViewLinked c