·您的位置: 首页 » 资源教程 » 编程开发 » JavaScript » DHTML工具栏,Web点击更精彩(4)--使用按钮

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

类别: JavaScript教程  评论数:0 总得分:0
     出于多种理由,我们推荐为工具栏条目使用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(按钮)的外部一样,将加亮取消了。请试一试:
  
  

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