📄 0035.htm
字号:
<html>
<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1 {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
<p align="center"><big><strong>动态HTML教程（四）</strong></big></p>
<div align="right">---《网猴》版权所有</div>
<p>如果你认真阅读了本教程并做了留给你的家庭作业的话，你心中肯定还存在这样一个疑问：这个动画是很有趣，但是你做的网站仍然是比较朴实无华的那种，所以动态HTML对你来说可能没有太大的价值。</p>
<p><font size="3" face="宋体">没关系，今天的教程就是针对你这样的问题制作的。今天我们将建立几个用户界面元素，处理用户事件，动态改变背景，自动变换网页内容以及显示或隐藏某些页面对象。
所有这些内容都有很强的实用性。</font></p>
<p><font size="3" face="宋体">你最好能先阅读<a
href="javascript:if(confirm('../../www.webmonkey.com.cn/javascript/tutor/tutorial1_page1.html \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server@'))window.location='../../www.webmonkey.com.cn/javascript/tutor/tutorial1_page1.html'" tppabs="http://www.webmonkey.com.cn/javascript/tutor/tutorial1_page1.html">Javascript教程</a>中关于链接事件的课程，以便对用户事件具备初步的了解。在今天的课程中将经常用到链接事件。
<p><font face="宋体" size="3">让我们编写一些我们所熟悉的用户界面元素－－下拉菜单，子菜单。这些元素和你现在正在浏览的窗口顶部的菜单条很类似。大多数操作系统都有一个类属专用接口工具集，当你需要应用下拉菜单时就可调用该工具集。然后你可以设定被选项目的的名称和执行的行为。
</font></p>
<font size="3">
<p><font face="宋体">由于HTML不包含这样的专用接口工具集，所以你必须建立自己的工具集。首先你必须描述它的外观。我们在菜单条上加入一定的颜色以及描述各项功能的名称，例如<tt>file</tt>、<tt>edit</tt>、<tt>view</tt>等等。当你点击该文字时，就会显示该菜单项下的子菜单。在子菜单框中点击相应的菜单项目就可触发某个执行程序的行为。让我们在HTML中编写这样的菜单。</font></p>
<p><font face="宋体">首先，你需要生成一个<tt>DIV</tt>作为顶部的菜单条：</font>
<ul>
<pre> <div id="menuBar"> </div></font></pre>
</ul>
<p><font face="宋体">现在将该菜单条放在页面顶部，加上特定的颜色：</font>
<ul>
<pre> <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> </font></pre>
</ul>
<p align="center"><font face="宋体">则生成这样一个<tt>DIV：</tt></font></p>
</font><div id="menuBar" align="center"></div>
<p><font face="宋体" size="3"><br>
你可能会对最后一条CSS规范不知所以然，这项是Netscape 对CSS的扩展，它指的是绝对定位了的元素的背景色。由于边框设置为<tt>border:
1px solid #99ffff;</tt>，所以有必要加入这一条使背景色延伸到DIV的边框。否则背景色只能在DIV所包含的内容底下显示。
<p><font face="宋体">下面我们插入一个菜单目录。我们将标题设置为"Webmonkey"
。</font>
<ul>
<pre> <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> </font></pre>
</ul>
<p> 显示结果如下：</font></p>
</font><div id="menuBar" align="center"></div><div id="webmonkey" class="daMenu"
align="center">
<p>Webmonkey</p>
</div><font size="3">
<p><font face="宋体">下面在webmonkey菜单项下加入子菜单：</font>
<ul>
<pre> <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> </font></pre>
</ul>
<p><font face="宋体">同其他菜单项结合后显示结果如下：<br>
</font></p>
</font><div id="menuBar" align="center"></div><div id="webmonkey2" class="daMenu2"
align="center">
<p>Webmonkey</p>
</div><div id="moreMonkey" class="moreMenu" align="center">
<p>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</p>
</div><font size="3">
<p><font face="宋体">下面我们为菜单项设定功能。首先要做的是选择<tt>moreMenu</tt>类，并将其隐藏。因为通常情况下，如果你不点击菜单项，它不会显示子菜单目录。所以，你应该加入下面的代码：</font>
<ul>
<pre> .moreMenu {position: absolute;
width: 100px;
border: 1px solid red;
background-color: red;
layer-background-color: red;
visibility: hidden;
top: 22px;
}</font></pre>
</ul>
<p><font face="宋体">现在这个<tt>DIV</tt>仍然在页面中，但浏览器不将它显示出来。
<p><font face="宋体" size="3">现在给菜单条加入脚本使其能响应鼠标的行为并执行相应的功能。我们利用<b>visibility</b>属性隐藏子菜单项目并在菜单项目被点击时显示子菜单。
</font></p>
<font size="3">
<p> 处理visibility时，你会立刻遇到DOM不兼容的问题。Netscape的DOM更多地受其<tt>LAYER</tt>标签和属性的影响。所以即使在DOM中你将一个对象的<tt>visibility</tt>属性设置为<tt>hidden</tt>（隐藏），Netscape也会将其显示出来。如果你加入下面这条：
</font>
<ul>
<tt><p><font face="宋体">if (daMenu.visibility == 'hidden')</font></p>
</tt>
</ul>
<p><font face="宋体">你所得到的不是样式表语法的参数值，而是<tt>LAYERS</tt>语法的参数值。
</font></p>
<p><font face="宋体" size="3">所以如果你设置<tt>document.foo.visibility =
'visible'</tt>, 则代码将会按照你预想的那样执行，对象<tt>foo</tt>在屏幕中可以被看到。如果你用<tt>alert(document.foo.visibility)</tt>检查参数值,
则返回的数值是<tt>show</tt>。解决办法是设置一些变量，用标准的条件并设定一个名为<tt>visible</tt>的变量用于Netscape中的'show'，在Internet
Explorer中则设置'visible'。在Netscape中设置一个名为<tt>'hide'</tt>
的变量，在InternetExplorer<tt>'则用hidden'</tt>。在相应的字符串位置放入这些变量，则问题就解决了。</font>
<ul>
<pre> <script>
if (document.layers) {
visible = 'show';
hidden = 'hide';
} else if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
function barTog(menu) {
if (document.layers) {
daMenu = document.layers[menu];
} else if (document.all) {
daMenu = document.all(menu).style;
}
if (daMenu.visibility == visible) {
daMenu.visibility = hidden;
} else {
daMenu.visibility = visible;
}
lastMenu = daMenu;
}
</script></font></pre>
</ul>
<p> <tt>barTog</tt>函数所做
的是设置标准的条件语句，如果在被传送的变量菜单中设定的对象是visible，则隐藏该对象，否则就显示该对象。然后将对该对象的引用传递给名为<tt>lastMenu</tt>的全局变量（这样以来，以后你可以再关闭它）。
接下来你要做的就是调用这个函数，所以在菜单条中你将"Webmonkey"设定一个anchor（锚区），并设定被点击是执行的行为。</font>
<ul>
<pre> <div id="webmonkey" class="daMenu">
<a href="#" class="itemAnchor"
onclick="javascript: barTog('moreMonkey'); return false;">
Webmonkey
</a>
</div>
</font></pre>
</ul>
<p><font face="宋体">这段代码执行<tt>barTog</tt>函数，并将应该被打开或关闭的DIV
的名称传递给它。</font>
<p><font size="3"><font face="宋体">下面要做的是给每个菜单条设定一个行为。你可以设定任何一种行为，不一定非得是动态HTML。但由于本教程讲的是动态HTML，而我们的课题是将如何改变layers的visibility（可视性）属性
。所以我们为每一个菜单项目设定隐藏和显示包含相应的网猴图象的层（layer）。
</font>
<ul>
<pre> <script>
function menuItem(item){
if (document.layers) {
daLast = document.layers[lastItem];
daItem = document.layers[item];
} else if (document.all) {
daLast = document.all(lastItem).style;
daItem = document.all(item).style;
}
daLast.visibility = hidden;
daItem.visibility = visible;
lastMenu.visibility = hidden;
lastItem = item;
}
var lastItem = 'aaron';
</script> </font></pre>
</ul>
<p><font face="宋体">这段脚本仍然用我们的老朋友－－条件语句调用两个对象，现调用item，然后是最后被打开的lastitem(<tt>lastItem</tt>的缺省设置是<tt>'aaron'</tt>
)，并且该语句还要记忆被打开的最后一个菜单（我们在barTog中设置的<tt>lastMenu</tt>）。设置完所有visibility后还记忆<tt>lastItem。</tt></font></p>
<p><font face="宋体">下面需要给每个菜单项目加上相应的anchor调用。</font>
<ul>
<pre> <a href="#" class="itemAnchor"
onclick="menuItem('captCursor'); return false"></font></pre>
</ul>
<p><font face="宋体">这条代码调用<tt>menuItem</tt>函数，并指示其显示ID为"captCursor"的DIV。现在将anchor锚定每个菜单项目并将每个DIV指向相应的网猴的名称。</font></p>
<p><font face="宋体">现在你可以制作你自己的菜单并在其中加入自己的菜单项目，隐藏及显示DIV，并在DIV中加入表单元素。明天的课程中我们将结合前面所学的知识作一个完整的展示。</font></p>
</font>
</table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -