DHTML工具栏,Web点击更精彩(4)--使用按钮
类别: JavaScript教程
出于多种理由,我们推荐为工具栏条目使用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(按钮)的外部一样,将加亮取消了。请试一试:
原因之一: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(按钮)的外部一样,将加亮取消了。请试一试:
-= 资 源 教 程 =-
文 章 搜 索