首页 >> 读书频道 >> 电脑 >> DHTML工具栏,Web点击更精彩(3)--工具栏的行为
 
· DHTML工具栏,Web
· DHTML工具栏,Web
· 神奇的页面滚动控制(二)
· 神奇的页面滚动控制(一)
· 怎样把Java Appl
· 网页技巧-
· JavaScript的脆
· JavaScript 的
· JavaScript 的
· 编写 JavaScrip
· JavaScript是什
· 弹出式说明窗口-
 
· 美容养颜手册
· 加油金顺剧情分集介绍完整
· 红楼梦:120回全本[清
· 素质教育在美国
· 全唐诗卷四十六
· 韩剧《布拉格恋人》剧情介
· 夜航船[作者:明·张岱]
· 局外人[作者:韩·可爱淘
· 现场流行病学
· 源氏物语[日本:紫式部]
· 武林寓言故事
· 2006高考录取规则
 
· (出租)中动商场部分及写
· (出租)中动动漫基地&#
· 喜剧学院
· 《善德女王》剧情介绍
· 魔女18号 剧情
· 丑女无敌剧情介绍
· 魔女幼熙剧情介绍
· 龙游天下剧情介绍
· 震撼世界的七日剧情介绍
· 静静的白桦林剧情介绍
· 心情日记—老公今天我想对
· 旗舰剧情介绍
欢迎来到月影社区!如果您觉得这里不错,请推荐给您的朋友们。月影社区:http://wf66.com/

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


查看有无更新版本

关键字:JavaScript 2006-9-8

 

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

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

[ 1 ]
DHTML工具栏,Web点击更精彩(3)--工具栏的行为 num

打印本页 关闭

关于我们版权声明本站导航友情连结作品演示 TOP↑