答案: 如果你认真阅读了本教程并做了留给你的家庭作业的话,你心中肯定还存在这样一个疑问:这个动画是很有趣,但是你做的网站仍然是比较朴实无华的那种,所以动态HTML对你来说可能没有太大的价值。没关系,今天的教程就是针对你这样的问题制作的。今天我们将建立几个用户界面元素,处理用户事件,动态改变背景,自动变换网页内容以及显示或隐藏某些页面对象。 所有这些内容都有很强的实用性。
你最好能先阅读javascript教程中关于链接事件的课程,以便对用户事件具备初步的了解。在今天的课程中将经常用到链接事件。
让我们编写一些我们所熟悉的用户界面元素--下拉菜单,子菜单。这些元素和你现在正在浏览的窗口顶部的菜单条很类似。大多数操作系统都有一个类属专用接口工具集,当你需要应用下拉菜单时就可调用该工具集。然后你可以设定被选项目的的名称和执行的行为。
由于HTML不包含这样的专用接口工具集,所以你必须建立自己的工具集。首先你必须描述它的外观。我们在菜单条上加入一定的颜色以及描述各项功能的名称,例如file、edit、view等等。当你点击该文字时,就会显示该菜单项下的子菜单。在子菜单框中点击相应的菜单项目就可触发某个执行程序的行为。让我们在HTML中编写这样的菜单。
首先,你需要生成一个DIV作为顶部的菜单条:
<div id="menuBar"> </div>
现在将该菜单条放在页面顶部,加上特定的颜色:<style type="text/css">
#menuBar {position: absolute;
left: 0;
top: 0;
width: 100%;
height: 22px;
border: 1px solid #99ffff;
background-color: #99ffff;
layer-background-color: #99ffff;
}
</style>
则生成这样一个DIV:
你可能会对最后一条CSS规范不知所以然,这项是Netscape 对CSS的扩展,它指的是绝对定位了的元素的背景色。由于边框设置为border: 1px solid #99ffff;,所以有必要加入这一条使背景色延伸到DIV的边框。否则背景色只能在DIV所包含的内容底下显示。下面我们插入一个菜单目录。我们将标题设置为"Webmonkey" 。
<style type="text/css">
#menuBar {position: absolute;
left: 0;
top: 0;
width: 100%;
height: 22px;
border: 1px solid #99ffff;
background-color: #99ffff;
layer-background-color: #99ffff;
}
.daMenu {position: absolute;
width: 100px;
height: 22px;
border: 1px solid #99ffff;
top: 0px
}
</style>
...
<div id="menuBar"> </div>
<div id="webmonkey" class="daMenu">
Webmonkey </div>
显示结果如下:Webmonkey
下面在webmonkey菜单项下加入子菜单:
<style>
.moreMenu {position: absolute;
width: 100px;
border: 1px solid red;
background-color: red;
layer-background-color: red;
top: 22px;
}
</style>
...
<div id="moreMonkey" class="moreMenu"> Aaron
<br> Captain Cursor
<br> Cassandra
<br> Chris
<br> Courtney
<br> Jeff
<br> Joanne
<br> Jean Pierre
<br> Klug
<br> Kristin
<br> Nadav
<br> Taylor
<br> Thau
<br> Tim
<br> Wendy
<br>
</div>
同其他菜单项结合后显示结果如下:
WebmonkeyAaron
Captain Cursor
Cassandra
Chris
Courtney
Jeff
Joanne
Jean Pierre
Klug
Kristin
Nadav
Taylor
Thau
Tim
Wendy下面我们为菜单项设定功能。首先要做的是选择moreMenu类,并将其隐藏。因为通常情况下,如果你不点击菜单项,它不会显示子菜单目录。所以,你应该加入下面的代码:
.moreMenu {position: absolute;
width: 100px;
border: 1px solid red;
background-color: red;
layer-background-color: red;
visibility: hidden;
top: 22px;
}
现在这个DIV仍然在页面中,但浏览器不将它显示出来。现在给菜单条加入脚本使其能响应鼠标的行为并执行相应的功能。我们利用visibility属性隐藏子菜单项目并在菜单项目被点击时显示子菜单。
处理visibility时,你会立刻遇到DOM不兼容的问题。Netscape的DOM更多地受其LAYER标签和属性的影响。所以即使在DOM中你将一个对象的visibility属性设置为hidden(隐藏),Netscape也会将其显示出来。如果你加入下面这条:
if (daMenu.visibility == 'hidden')
你所得到的不是样式表语法的参数值,而是LAYERS语法的参数值。
所以如果你设置document.foo.visibility = 'visible', 则代码将会按照你预想的那样执行,对象foo在屏幕中可以被看到。如果你用alert(document.foo.visibility)检查参数值, 则返回的数值是show。解决办法是设置一些变量,用标准的条件并设定一个名为visible的变量用于Netscape中的'show',在Internet Explorer中则设置'visible'。在Netscape中设置一个名为'hide' 的变量,在InternetExplorer'则用hidden'。在相应的字符串位置放入这些变量,则问题就解决了。
<script>
if (document.layers) {
visible = 'show';
hidden = 'hide';
} else if (document.all) {
visible = 'visible';
hidden = 'hidden';
}function barTog(menu) {
if (document.layers) {
上一个:动态HTML教程(五)
下一个:动态HTML教程(三)