主题:  IE 永远未老,DHTML行为独好(自chinabyte)三

5D荣誉斑竹

职务:版主
等级:3
金币:10.0
发贴:786
注册:2000/9/15 21:25:59
#12001/2/1 10:00:22
在前面的内容里我们讨论了如何向 Behavior 传递对象和数据。但 Behavior 并不仅仅是接收数据,它还按照你的规定产生事件。在闪动足球例子里,我们定义了一个叫作 onFifthBlink 的事件,它在第五次闪动足球图像时发出信号。Behavior 的事件定义在 Scriptlet 的接口部分里,使用 IMPLEMENTS 标记的 Behavior 类型:

< IMPLEMENTS ID="kuku" TYPE="Behavior" DEFAULT>
< EVENT NAME="onFifthBlink"/>
< /IMPLEMENTS>
   在 Scriptlet 的实现部分中产生事件,是通过 fireEvent() 方法完成的。在例子里,我们简单地计算闪动的次数,然后在五次闪动后调用 fireEvent() 函数:

counter +=1;
if (counter == 10) {
fireEvent("onFifthBlink");
counter = 0;
}
   注意:我们计数到 10 而不是 5,因为每次闪动由两次可视性改变组成。同时,我们把 counter 变量清零,这样每隔五次闪动就引发事件,而不是只在第一个五次闪动之后。

   引发的事件同调用 Behavior 的 DHTML 元素相联系。在闪动足球例子里,只是在每隔五次闪动后弹出一个警告窗口:

< DIV CLASS="soccer" ... onFifthBlink = "alert('Fifth Blink Point')" ...

以上我们演示了如何定义 Behavior 并将它和一个 DHTML 元素联系起来。但 Behaviors 的真正优点是可以在好几个 DHTML 元素间共享一个 Behavior。通过对 Scriptlet 属性的不同赋值,可以完成略为不同的行为。以下是一个闪动的足球:

< DIV CLASS="soccer" x="200" y="250" onFifthBlink =
    "alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
   现在,在窗口的不同位置再添加五个足球。DIV 这一行基本上和以前一样,只是每个 DIV 中的 x 和 y 属性被赋予了不同的值:

< DIV CLASS="soccer" x="50" y="100" onFifthBlink =
    "alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
< DIV CLASS="soccer" x="100" y="150" onFifthBlink =
    "alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
< DIV CLASS="soccer" x="150" y="200" onFifthBlink =
    "alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
< DIV CLASS="soccer" x="200" y="250" onFifthBlink =
    "alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
< DIV CLASS="soccer" x="250" y="300" onFifthBlink =
    "alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
   像我们随后解释的那样,在几个元素间共享同一模型,是面向对象语言的基本要素。它不同于使用不同参数调用一个过程。面向对象模块同时封装了数据和能操作这些数据的方法。Behavior 恰恰就是这样。    Behavior 的面向对象概念

   像前面演示的那样,Behavior 结构例示了一些源于面向对象的编程语言及其环境的概念:

隐藏实现细节:只向调用它的 HTML 代码暴露了 Behavior 接口 (通过 IMPLEMENTS 标记)。这样允许你改变实现的方式,而不改变调用它的 HTML 元素,同时保持接口不变。


封装代码:Behavior 的定义封装在一个单独的 Scriptlet 文件中 (在闪动足球例子里的soccer.sct)。将行为和页面内容分隔开来方便了对它们二者的维护,维护内容的专业人员不再需要处理格式和风格。另一方面,维护格式的专业人员也不再需要处理页面的内容。


基于对象的定义:Behavior 的定义和对象的定义非常相像,它包含了数据和定义在数据上的操作。在 Behavior 定义之后,不能再把任何数据同它联系在一起。除了开始定义的操作,它不支持任何其它操作。


代码复用:同一个 Behavior 定义可以被多个 DHTML 元素使用。


应用程序过程化接口 (API):Behavior Scriptlet 的接口像一个过程化接口那样被很好地定义。包含内容的页面给 Behavior 的预定义参数赋值。Behavior 能向调用它的页面传回事件。


   以下是 Scriptlet 的完整代码:

< SCRIPTLET ID="soccer">

< IMPLEMENTS ID="kuku" TYPE="Behavior" DEFAULT>
< EVENT NAME="onFifthBlink"/>
< /IMPLEMENTS>

< IMPLEMENTS TYPE="Automation">
< METHOD NAME="blink"/>
< PROPERTY NAME="x"/>
< PROPERTY NAME=y/>
< /IMPLEMENTS>

< SCRIPT LANGUAGE="javascript">
var msecs =2000;
var counter = 0;
style.position = "absolute";
style.pixelTop = x;
style.pixelLeft = y;


window.attachEvent("onload", onload);

function onload()
{
window.setTimeout(uniqueID+".blink()", msecs);
}

function blink() {
style.visibility = (style.visibility == "hidden") ? "visible" : "hidden";
counter +=1;
if (counter == 10) {
fireEvent("onFifthBlink");
counter = 0;
}
window.setTimeout(uniqueID+".blink()", msecs);
}

< /SCRIPT>
< /SCRIPTLET>
   HTML 调用者页面
   以下是 HTML 的调用者页面。注意我们是如何将 soccer 定义为样式表,并指到 soccer.sct,以及在 DHTML 标记 DIV 中引用样表式 (Behavior) 的:

< HTML>
< HEAD>
< STYLE>
.soccer{behavior:url(soccer.sct)}
< /STYLE>
< /HEAD>
< BODY>
< DIV CLASS="soccer" x="200" y="250" onFifthBlink = "alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
< /BODY>
< /HTML>
   注意看调用者页面是多么简单。现在,所有的格式定义和动态位置调整都被封装并隐藏在 Behavior 定义文件即 soccer.sct 里。如果需要在同一窗口中添加更多的闪动足球,请参照我们前面提供的方法。

   结语

   本文我们讨论了Internet Explorer 5.x 中提供的最强大新功能之一:DHTML Behavior。阅读本文后,你应该了解如何在 Internet Explorer 5.x 中实现 DHTML Behavior、如何使用 Scriptlet 定义行为。使用 Scriptlet 定义行为包括接口定义和细节实现两个部分。我们演示了 Behavior 的源于面向对象语言的几个概念,比如:封装、代码共享、抽象和 API。

编辑历史:[这消息被反斗星编辑过(编辑时间2001-02-01 10:01:21)]