《网页制作014》由会员分享,可在线阅读,更多相关《网页制作014(39页珍藏版)》请在金锄头文库上搜索。
1、下载下载第14章行为和时间线如果要执行较复杂的数据处理,通常需要执行服务器端的脚本或程序。然而如果仅仅希望自己同页面中的元素进行简单的交互控制,每次都连接到服务器就显得很不现实,这不仅使交互控制变得缓慢,而且还延长了联机时间,造成不必要的浪费。如果仅仅希望进行简单的页面中交互控制,则可以使用客户端的脚本或程序。所谓客户端,也即脚本程序被包容在当前的网页中,用户可以直接在网页中进行各种动作,实现信息交互,而不必连入I n t e r n e t服务器。事实上,我们在介绍表单的一章中,已经举过一个客户端脚本的例子。很多人通过在文档中包含J a v a S c r i p t脚本来实现用户同页面的交
2、互,然而编写脚本既复杂,又需要专门的学习,所以, D r e a m w e a v e r提供了一种称作“ B e h a v i o r” (行为)的机制,帮助您构建页面中的交互行为。可以将行为看作是 D r e a m w e a v e r的内置J a v a S c r i p t库,它不仅可以帮助您构建脚本,还可以对现有脚本进行管理。利用 D r e a m w e a v e r,您不用书写一行代码,就可以实现丰富的动态页面效果,实现人和网页的交互。本章主要介绍如何利用D r e a m w e a v e r构建行为,实现网页的动态效果。14.1 行为概述实际上,我们曾经接触过
3、行为,为文档添加导航条、跳转菜单、轮替图像等,实际上都是使用的行为。这一节,我们介绍行为的基本概念。14.1.1 行为的概念所谓行为(B e h a v i o r) ,顾名思义,就是在网页中进行的一系列动作,通过这些动作,可以实现用户同网页的交互,也可以通过动作使某个任务被执行。一般来说,一个行为应该由一个事件( e v e n t)和一个动作(a c t i o n)所组成。例如,当用户将鼠标移动到一幅图像上,这就产生了一个事件,如果这时候图像变化(这就是我们前面介绍过的轮替图像) ,则实际上就导致了一个动作发生。动作通常由一段J a v a S c r i p t代码所组成,利用这段代码
4、可以完成相应的任务,例如打开浏览器、播放声音或视频等,在 D r e a m w e a v e r中,可以使用D r e a m w e a v e r内置的行为来往页面中添加J a v a S c r i p t代码,而不用自己书写,当然,也可以对现有的代码进行修改,使之更符合自己的需要。事件则通常由浏览器所定义,它可以被附加到各种页面元素上,也可以被附加到 H T M L标记中。通常一个事件总是针对页面元素或标记而言的。例如,在大多数浏览器中的超级链接上都会发生o n M o u s e O v e r、o n M o u s e O u t和o n C l i c k这三种事件。当鼠标
5、移动到链接上,就发生链接的o n M o u s e O v e r事件,而鼠标移动到链接之外,就发生链接的 o n M o u s e O u t事件,而单击链接,就发生链接的o n C l i c k事件。另一个常见的事件是 o n L o a d,它同图像或是文档正文相关联,当载入文档时,就发生文档的o n L o a d事件,而载入图像时,就发生图像的o n L o a d事件。将事件和动作组合起来,就构成了行为,例如,将 o n C l i c k行为同一段J a v a S c r i p t代码相关联,在单击鼠标时就可以执行相应的 J a v a S c r i p t代码。通常
6、,我们将事件产生的这个过程称作触发。不是所有的动作都需要用户的干涉才会发生,例如我们可以指定某个动作每隔1 0秒运行一次,当然,这实际上还是由事件触发的,只是这种事件不是通过用户本身的行为而产生的罢了。有时候会有多个动作同一个事件相关联,换句话说,当事件发生时,会导致多个动作被执行。在D r e a m w e a v e r中,可以指定这些动作发生的顺序,从而实现需要的结果。D r e a m w e a v e r内置了很多行为动作,这仿佛是一个现成的 J a v a S c r i p t库,即便您不熟悉J a v a S c r i p t代码,也可以构建同页面的交互。除 M a c
7、r o m e d i a公司之外,有些第三方厂商提供了更多的行为库,您可以从I n t e r n e t上下载它们,然后在D r e a m w e a v e r中应用,请参看1 4 . 2 . 4一节的介绍。实际上, D r e a m w e a v e r提供了丰富的编程接口( A P I) ,您可以根据相应的规范,自行构建需要的行为库,并将之融合到 D r e a m w e a v e r中,相关信息,可以查看D r e a m w e a v e r的扩展帮助。14.1.2 认识事件我们已经了解了什么是行为,也知道事件在行为中的作用。这一节里,我们介绍一些基本的事件类型,以帮
8、助读者更好地了解行为,以便在创作网页时更加得心应手。下面将要介绍的就是在创作网页时常见的事件及其含义,需要注意的是,不同版本的浏览器所支持的事件类型可能也不相同。为了更好地说明问题,我们进行如下约定:事件名称后标有“I E 3”的,表明它适用于Internet Explorer 3.0浏览器;标有“I E 4”的,表明它适用于Internet Explorer 4.0浏览器;标有“N S 3”的,表明它适用于Netscape Navigator 3.0浏览器;标有“N S 4”的,表明它适用于Netscape Navigator 4.0浏览器。要了解更多的事件信息,可以从 D r e a m
9、w e a v e r安装目录的Configuration/ Behaviors/Events文件夹中找寻,在该文件夹下包含多个 H T M L文档,您可以根据浏览器的不同,打开相应文档,然后查询事件信息。下面开始介绍常见的事件类型和含义。O n A b o r t(I E 4、N S 3、N S 4)当用户停止浏览器对图像的载入时会触发该事件。例如,当图像被下载时用户单击了浏览器的“停止”按钮,这时就会触发该事件。o n A f t e r U p d a t e(I E 4)当页面上一个捆绑数据的元素完成对数据源的更新时会触发该事件。o n B e f o r e U p d a t e(
10、I E 4)当页面上一个捆绑数据的元素中的数据被改变,并即将失去焦点时会触发该事件。该事件发生在数据源被更新之前。o n B l u r(I E 3、I E 4、N S 3、N S 4)该事件同o n F o c u s事件正好相反。当指定的元素停止从用户的交互行为上获取焦点时就会触发该事件。例如,当用户在文本框中单击之后,再单击文本框之外,浏览器就会针对该文本框产生一个 o n B l u r事件。o n B o u n c e(I E 4)当选取框元素中的内容延伸到选取框元素边界之外时,就会触发该事件。o n C h a n g e(I E 3、I E 4、N S 3、N S 4)当用户改
11、变了页面中的值时就会触发该事件。例第14章 行为和时间线309下载如,当用户从下拉列表(下拉菜单)中选择了一个菜单项,或是当用户改变了文本框中的文本,并单击页面上的其他位置时,就会触发该事件。o n C l i c k(I E 3、I E 4、N S 3、N S 4)当用户单击特定的页面元素,例如链接、按钮或图像映像时,就会触发该事件。o n D b l C l i c k(I E 4、N S 4)当用户双击特定的页面元素时就会触发该事件。o n E r r o r(I E 4、N S 3、N S 4)当浏览器在载入页面或图像时发生错误,就会触发该事件。o n F i n i s h(I E
12、4)当选取框元素中的内容完成一个循环时就会触发该事件。o n F o c u s(I E 3、I E 4、N S 3、N S 4)当指定元素通过用户的交互行为获得焦点时就会触发该事件。例如在一个文本框上单击时,该文本框上就产生一个 o n F o c u s事件。o n H e l p(I E 4)当用户单击浏览器的帮助按钮(通常是 F 1)或从浏览器的“帮助”菜单中选择帮助菜单项时,就会触发该事件。o n K e y D o w n(I E 4、N S 4)当用户按下了一个键,在尚未释放之前,会触发该事件。o n K e y P r e s s(I E 4、N S 4)当用户按下键然后又释放
13、键,则就会触发该事件。该事件很像o n K e y D o w n和o n K e y U p事件的组合。o n K e y U p(I E 4、N S 4)当用户释放被按下的键时,就会触发该事件。o n L o a d(I E 3、I E 4、N S 3、N S 4)当图像或页面被完全载入之后,就会触发该事件。o n M o u s e D o w n(I E 4、N S 4)当用户按下鼠标左键,在尚未释放之前,会触发该事件。o n M o u s e M o v e(I E 3、I E 4)当用户将鼠标指针在一个页面元素上移动时,在该页面元素上就会触发该事件。o n M o u s e O
14、 u t(I E 4、N S 3、N S 4)当鼠标指针移出了指定元素(例如链接)的范围时,在该页面元素上就会触发该事件。o n M o u s e O v e r(I E 3、I E 4、N S 3、N S 4)当鼠标第一次移入指定元素(例如链接)的范围时,就会触发该事件。o n M o u s e U p(I E 4、N S 4)当按下的鼠标按钮被释放时,就会触发该事件。o n M o v e(N S 4)当浏览器窗口或框架移动时,就会触发该事件。例如,拖动浏览器窗口,在桌面上移动,就会触发该事件。o n R e a d y S t a t e C h a n g e(I E 4)当指定元
15、素的状态被改变时,就会触发该事件。这些可能的元素状态包括未初始化(u n i n i t i a l i z e d) 、载入(l o a d i n g)和完成(c o m p l e t e)等。o n R e s e t(I E 3、I E 4、N S 3、N S 4)当表单中的数据被复位为默认值时,就会触发该事件。o n R e s i z e(I E 4、N S 4)当用户重设浏览器窗口或框架的大小时,就会触发该事件。o n R o w E n t e r(I E 4)在当前捆绑数据源的记录指针被改变后,就会触发该事件。o n R o w E x i t(I E 4)在当前捆绑数据源
16、的记录指针将要改变时,就会触发该事件。o n S c r o l l(I E 4)当用户利用滚动条或箭头键上下滚动文档内容时,就会触发该事件。o n S e l e c t(I E 3、I E 4、N S 3、N S 4)当用户从一个文本框中选中文本时,就会触发该事件。o n S t a r t(I E 4)当选取框元素中的内容开始循环时,会触发该事件。o n S u b m i t(I E 3、I E 4、N S 3、N S 4)当用户递交一份表单时,就会触发该事件。310Dreamweaver 3网页设计下载o n U n l o a d(I E 3、I E 4、N S 3、N S 4)当用户离开页面时,就会触发该事件。例如,当用户从一个页面跳转到另一个页面时,原先页面上就会触发该事件。14.2 应用行为介绍了行为的基本概念后,我们就可以开始学习如何在文档中应用行为。14.2.1 认识行为面板在D r e a m w e a v e r中,对行为的添加和控制主要是通过行为面板实现的。您可以按照如下方法实现行为面板。方法一:打开“Wi n d o w”菜单,选择“