html教程_动态HTML教程（四）

html教程_动态HTML教程（四） 

21视频教程网收集整理

    如果你认真阅读了本教程并做了留给你的家庭作业的话，你心中肯定还存在这样一个疑问：这个动画是很有趣，但是你做的网站仍然是比较朴实无华的那种，所以动态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> 
同其他菜单项结合后显示结果如下：

Webmonkey

Aaron 
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) {
    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>
    barTog函数所做 的是设置标准的条件语句，如果在被传送的变量菜单中设定的对象是visible，则隐藏该对象，否则就显示该对象。然后将对该对象的引用传递给名为lastMenu的全局变量（这样以来，以后你可以再关闭它）。 接下来你要做的就是调用这个函数，所以在菜单条中你将"Webmonkey"设定一个anchor（锚区），并设定被点击是执行的行为。 

 <div id="webmonkey" class="daMenu">
  <a href="#" class="itemAnchor" 
onclick="javascript: barTog('moreMonkey'); return false;">
  Webmonkey
  </a>
</div>

这段代码执行barTog函数，并将应该被打开或关闭的DIV 的名称传递给它。 

    下面要做的是给每个菜单条设定一个行为。你可以设定任何一种行为，不一定非得是动态HTML。但由于本教程讲的是动态HTML，而我们的课题是将如何改变layers的visibility（可视性）属性 。所以我们为每一个菜单项目设定隐藏和显示包含相应的网猴图象的层（layer）。 

 <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> 
   这段脚本仍然用我们的老朋友－－条件语句调用两个对象，现调用item，然后是最后被打开的lastitem(lastItem的缺省设置是'aaron' )，并且该语句还要记忆被打开的最后一个菜单（我们在barTog中设置的lastMenu）。设置完所有visibility后还记忆lastItem。

下面需要给每个菜单项目加上相应的anchor调用。 

 <a href="#" class="itemAnchor" 
onclick="menuItem('captCursor'); return false">
    这条代码调用menuItem函数，并指示其显示ID为"captCursor"的DIV。现在将anchor锚定每个菜单项目并将每个DIV指向相应的网猴的名称。

    现在你可以制作你自己的菜单并在其中加入自己的菜单项目，隐藏及显示DIV，并在DIV中加入表单元素。明天的课程中我们将结合前面所学的知识作一个完整的展示。

进入HTML视频教程专区