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

<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

     出于多种理由，我们推荐为工具栏条目使用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（按钮）的外部一样，将加亮取消了。请试一试：
  
   <script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>