| 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 content for our element behavior: </BODY> </HTML> 这里我们在 .htc 文件中添加了一个带有一些内容的 <BODY> 标记和一个新的 PUBLIC:DEFAULTS 元素，它指明将 .htc 文件的内容用作此行为的 ViewLinke 的内容。我们运行 includedemo2.htm 文件时会看到这一内容以元素出现。它能这样工作是因为，从效果上讲，.htc 文件是一个 HTML 文件并且它的内容由 HTML 语法分析器进行语法分析。现在，ViewLink 技术允许我们显示内容而不必将其插入使用元素行为的主文档。 包含内容 include 行为的下一步是获得文本文件并将其包含为 HTC 的 ViewLink 内容。完成这些使我们使用一个可以在 Internet Explorer 5.0 中使用的异步下载数据行为。我们来看 include3.htc：(同样，要看到演示，你需要 includedemo3.htm，它引用 include3.htc 实现它的行为) <PUBLIC:COMPONENT tagname="include"> <PUBLIC:PROPERTY name="src" /> <PUBLIC:DEFAULTS viewLinkContent="true" /> <PUBLIC:ATTACH event="oncontentready" onevent="init();" /> </PUBLIC:COMPONENT> <SCRIPT> function init() { if (src) { dwn.startDownload(src, onDone); } } function onDone(s) { dwn.innerText=s; } </SCRIPT> <BODY id=dwn style = "behavior:url(#default#download)"> </BODY> 需要注意的第一件事是我们在行为中增加了一个属性声明 src，它被用以指明我们希望下载的文件。注意由于安全原因，在 HTML 中引用时，下载行为只允许我们从同一域名 (实际上是指 Web 站点) 下载文件。我们还在 HTC 的 body 中添加了默认下载行为，以及在初始化时下载文件并在收到文件后将其内容放到 body 中所需的脚本。 行为的默认设置 这样我们就有了一个简单的元素，可以用来下载内容并能在文档中以文本方式显示它们。现在我们使用元素行为的默认格式功能来对它做一点小改进，这样我们可以指定元素行为的默认格式信息，同时允许使用自定义元素的 HTML 页面替换这些信息。在我们行为的下一个版本 include4.htc 中，我们对 PUBLIC:DEFAULTS 元素作若下修改： <PUBLIC:DEFAULTS viewLinkContent="true" style="background-color:beige; color:Blue; width:100%" /> 这个修改的作用是使我们包含的内容的颜色变成在灰棕底色上的蓝色。然而，如果你有 HTML 文件的经验，你知道可以在使用元素行为的文档中替换这些设置。试着将 includedemo4.htm 文件中的 include 元素改为： <MYNS:INCLUDE src="include4.htc" style="color:beige;background-color:blue"/> 这样引用行为的文件中的命令就替换了默认格式。 我们希望此元素的默认宽度和引用它的文档一样，所以我们在默认格式中指定了 100% 的宽度。 行为的改进 自己实现这个行为以了解它是如何工作的。可以改进的地方包括使用 HTML 内容代替普通文本、包含一个标题以说明源代码是从哪里引用的，等等。 |
