DHTML工具栏，Web点击更精彩(3)--工具栏的行为

领测软件测试网      要完成工具栏的行为，我们需要将一些JavaScript 包含到 Web页面的结尾处：
  
  　　 < SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
  
  　　 allSPANs = toolbar.children;
  
  　　 for (i=0;i< allSPANs.length;i++) {
  　　 tSpan = allSPANs(i);
  　　 tSpan.onselectstart = function(){return false}
  　　 tSpan.onmouseover = function(){
  　　 this.style.border = "2px buttonhighlight outset";
  　　 }
  
  　　 tSpan.onmouseout = function(){
  　　 this.style.border = "2px buttonface solid";
  　　 }
  
  　　 tSpan.onmousedown = function(){
  　　 this.style.border = "2px buttonhighlight inset";
  　　 }
  
  　　 tSpan.onmouseup = function(){
  　　 this.style.border = "2px buttonhighlight outset";
  　　 }
  
  　　 }
  　　 < /SCRIPT>
  　　 < /BODY>< /HTML>
  
  　　 我们的JavaScript首先要识别所有包含在DIV工具栏中的SPAN元素。由于DIV只包含SPAN元素，因此这些元素都反映到DIV的子集中。为了引用方便，我们将子集分配给allSPANs变量。
  
  　　 然后我们在allSPANs中循环，将每个元素识别为tSpan，同样为了应用方便，我们给每个元素分配5个事件处理器：
  
  　　 onselectstart
  
  　　 当鼠标拖过一个条目的文本时，我们不希望用户不经意地将其点亮（选中），因此从selectstart事件返回false。
  
  　　 Onmouseover
  
  　　 当用户鼠标移过一个条目时，边界的颜色被设置成buttonhighlight，创建一个颜色较浅的阴影；将边界格式设置成outset，创建一个3D的边界效果。
  
  　　 Onmouseover
  
  　　 当用户鼠标移出一个条目时，边界又恢复到but类中所定义的停顿状态。
  
  　　 Onmousedown
  
  　　 当用户鼠标移到一个条目以下时，边界恢复了在"over"中的颜色，但是格式变成了inset，形成了“被按下的”按钮的外观。
  
  　　 Onmouseup
  
  　　 当用户鼠标移到一个条目以上时，边界恢复了在"over"中的外观。
  
  　　 将这些综合起来，现在我们就有了这个应用程序的文本工具栏，点击这里 查看一下效果。
  
  　　 为什么边界宽度用的是2个象素而不是1个象素？在上面的原始屏幕映象中，什么时候应用程序的边界是1个象素呢？
  
  　　 当在规则的HTML元素上创建边界时，用1个象素显示得不是很好，点击这里 查看一下效果。
  
  　　 这就是简单的文本工具栏了。它能很好地工作并且很有用。但是我们随后推荐稍微复杂一点的工具栏，同时也是更加文雅的方法。
  
  
  

文章来源于领测软件测试网 https://www.ltesting.net/