·您的位置: 首页 » 资源教程 » 编程开发 » JavaScript » DHTML工具栏,Web点击更精彩(3)--工具栏的行为

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

类别: JavaScript教程  评论数:0 总得分:0
     要完成工具栏的行为,我们需要将一些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个象素显示得不是很好,点击这里 查看一下效果。
  
     这就是简单的文本工具栏了。它能很好地工作并且很有用。但是我们随后推荐稍微复杂一点的工具栏,同时也是更加文雅的方法。
  
  
  

-= 资 源 教 程 =-
文 章 搜 索
关键词:
类型:
范围:
纯粹空间 softpure.com
Copyright © 2006-2008 暖阳制作 版权所有
QQ: 15242663 (拒绝闲聊)  Email: faisun@sina.com
 纯粹空间 - 韩国酷站|酷站欣赏|教程大全|资源下载|免费博客|美女壁纸|设计素材|技术论坛   Valid XHTML 1.0 Transitional
百度搜索 谷歌搜索 Alexa搜索 | 粤ICP备19116064号-1