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

DHTML工具栏,Web点击更精彩(4)--使用按钮


查看有无更新版本

关键字:JavaScript 2006-9-8

 

     出于多种理由,我们推荐为工具栏条目使用BUTTON元素,而不是SPAN。
 
  原因之一:1个象素的边界
 
  用BUTTON,我们所想要的1个象素的边界也能出现很好的效果,这样就是真正的Windows的按钮外观了。
 
  原因之二:“按下的”视觉效果更好
 
  一个真正的“按下的”按钮的外观所包含的不仅仅是一个inset(陷入)的边界,而且整个元素还要有一个轻微的偏移量(右下)。BUTTON元素在默认状态提供了这种功能。
 
  原因之三:更好的默认格式
 
  一个BUTTON的默认颜色是buttonface,其中包含的HTML排列在中间,水平和垂直均对齐。
 
  点击这里看一下效果。
 
  要创建以上这个基于BUTTON的工具栏,我们使用下面的HTML和脚本:
 
  < HTML>
  < HEAD>
  < STYLE TYPE="text/css">
  .but {
   border:1px buttonface solid;
   font-family:MS Sans Serif;font-size:8pt;
  }
  < /STYLE>
  .
  .
  .
  < /HEAD>
  < BODY>
  .
  .
  .
  < DIV ID="toolbar"
   STYLE="width:250;background-color:buttonface;
   padding-top:1px;padding-left:2px;">
   < BUTTON CLASS=but STYLE="width:32"
   onClick="yourFileFunction()">File< /BUTTON>< BUTTON
   CLASS=but STYLE="width:34"
   onClick="yourEditFunction()">Edit< /BUTTON>< BUTTON
   CLASS=but STYLE="width:39"
   onClick="yourViewFunction()">View< /BUTTON>< BUTTON
   CLASS=but STYLE="width:59"
   onClick="yourFavoritesFunction()">Favorites< /BUTTON>< BUTTON
   CLASS=but STYLE="width:42"
   onClick="yourToolsFunction()">Tools< /BUTTON>< BUTTON
   CLASS=but STYLE="width:36"
   onClick="yourHelpFunction()">Help< /BUTTON>
  < /div>
  .
  .
  .
  < script LANGUAGE="Javascript1.2" TYPE="text/javascript">
 
  allBUTs = toolbar.children;
 
  for (i=0;i< allBUTs.length;i++) {
   tSpan = allBUTs(i);
   tSpan.onselectstart = function(){return false}
   tSpan.onmouseover = function(){
   this.style.border = "1px buttonhighlight outset";
   }
   tSpan.onmouseout = function(){
   this.style.border = "1px buttonface solid";
   }
   tSpan.onmousedown = function(){
   this.style.border = "1px buttonhighlight inset";
   }
   tSpan.onmouseup = function(){
   this.style.border = "1px buttonhighlight outset";
   window.focus();
   }
  }
  < /script>>
  < /BODY>
  < /HTML>
 
 
  在STYLE 中,我们忽略了 BUTTON 的默认边界,创建了无形边界。我们还定义了使用的字体,因为BUTTON不象SPAN,Explorer将其认为是“控件”,不从其母元素那里继承任何格式。
 
  HTML和脚本的剩余部分同SPAN元素的一样。但是在onmouseup处理器中增加了一个Window.focus()语句,这对于保持一个“清洁”的外观是必要的。当一个BUTTON(按钮)被点击时,它保持在点亮状态,并用虚线分布在Explorer轮廓上。通过将focus(焦点)转换到window,就象是点击BUTTON(按钮)的外部一样,将加亮取消了。请试一试:

DHTML工具栏,Web点击更精彩(4)--使用按钮

[ 1 ]
DHTML工具栏,Web点击更精彩(4)--使用按钮 num

打印本页 关闭

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