IE里的探索之创建具备良好行为的自定义元素

2008-02-23 05:29:17来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

(作者:青苹果工作室编译 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 技术允许我们显示内容而不必将其插入使用元素行为的主文档。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇: 学习C 的最大难度

下一篇: IE里的探索之添加工具条按钮