DHTML工具栏,Web点击更精彩(1)
类别: JavaScript教程
原文出处:http://webreference.com/dhtml/column29/
当阅读完本文后,你会发现实现这个目的要比想象的简单得多。
熟悉简单的JavaScript图形翻转器。请参阅 JavaScript事件处理。
了解JavaScript的鼠标事件。这些内容同样在 JavaScript事件处理 中讨论过。
熟悉Internet Explorer对系统颜色的使用。请参阅 访问用户自定义系统色彩 第1部分。
现在,首先介绍概念并创建一个只有文本的工具栏。
一个典型的只有文本的Windows应用程序工具栏看起来是这样的:
当用户鼠标移到工具栏某一项上方时,这一项就变成了按钮,象这样:
这个按钮效果是通过增加一个三维边界实现的。近看是这样的:
有了 IE DHTML,我们就可以在一个Web页面中用CSS边界来复制这个行为。下表图示了我们可用的边界:
如上图所示,当要把一个元素按钮化,我们可以对它应用 outset 边界。需要“按下的按钮”效果时,我们就可以使用 inset 边界。
下面我们来试试看。
在页面的格式表中,创建一个but类,将它应用在所有需要按钮化的元素上:
< STYLE TYPE="text/css">
.but {
border:2px buttonface solid;
padding-top:1;
height:20;
text-align:center;
cursor:default;
}
< /STYLE>
but类规定了工具栏的条目在其停顿状态下的样式。注意我们将这些条目的边界颜色定义为buttonface,将其样式定义为solid。基本上我们创建的都是无形边界,因此我们就可以将颜色buttonface应用到条目本身。无形的边界是必要的,因为边界是放置在条目边界线内部的。边界的状态决定了条目中文本的位置。如果没有初始边界而我们后来再增加一个的话,条目的文本就会被重新布置,产生一个拉伸的效果。
下一页:简单的文本
当阅读完本文后,你会发现实现这个目的要比想象的简单得多。
熟悉简单的JavaScript图形翻转器。请参阅 JavaScript事件处理。
了解JavaScript的鼠标事件。这些内容同样在 JavaScript事件处理 中讨论过。
熟悉Internet Explorer对系统颜色的使用。请参阅 访问用户自定义系统色彩 第1部分。
现在,首先介绍概念并创建一个只有文本的工具栏。
一个典型的只有文本的Windows应用程序工具栏看起来是这样的:
当用户鼠标移到工具栏某一项上方时,这一项就变成了按钮,象这样:
这个按钮效果是通过增加一个三维边界实现的。近看是这样的:
有了 IE DHTML,我们就可以在一个Web页面中用CSS边界来复制这个行为。下表图示了我们可用的边界:
如上图所示,当要把一个元素按钮化,我们可以对它应用 outset 边界。需要“按下的按钮”效果时,我们就可以使用 inset 边界。
下面我们来试试看。
在页面的格式表中,创建一个but类,将它应用在所有需要按钮化的元素上:
< STYLE TYPE="text/css">
.but {
border:2px buttonface solid;
padding-top:1;
height:20;
text-align:center;
cursor:default;
}
< /STYLE>
but类规定了工具栏的条目在其停顿状态下的样式。注意我们将这些条目的边界颜色定义为buttonface,将其样式定义为solid。基本上我们创建的都是无形边界,因此我们就可以将颜色buttonface应用到条目本身。无形的边界是必要的,因为边界是放置在条目边界线内部的。边界的状态决定了条目中文本的位置。如果没有初始边界而我们后来再增加一个的话,条目的文本就会被重新布置,产生一个拉伸的效果。
下一页:简单的文本
- 上一篇: DHTML工具栏,Web点击更精彩(2)--简单的文本
- 下一篇: 神奇的页面滚动控制(二)
-= 资 源 教 程 =-
文 章 搜 索