当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 利用JavaScript创建功能强大的GUI(4)

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码（完全）
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

No. « 12 13 14 15 »

技术文章搜索

关键字

HTML/XHTML教程 中的 利用JavaScript创建功能强大的GUI(4)

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-11-04   浏览: 95 ::
收藏到网摘: n/a

　　读者可能已经注意到，我们在样式表中使用了三种系统颜色引用：buttonface、buttonshadow和buttonhighlight。通过将buttonface作为工具栏和按钮的背景色，我们可以使用用户得到与其他应用软件相同的界面外观。用buttonshadow和buttonhighlight色创建边界，通过编写简单的JavaScript函数，就能使按钮具有3D效果。当然，如果想使该GUI更与网站而不是用户的浏览器匹配，可以更换适当的颜色。

　　能够改变按钮样式的JavaScript下面的四个函数供事件处理程序在改变鼠标事件图像的类名时使用。尽管可以把JavaScript代码编写成嵌入式的，但我们把它们组织进一个函数中，方便以后添加其他功能。

function mouseover(el) {
el.className = "raised";
}

function mouseout(el) {
el.className = "button";
}

function mousedown(el) {
el.className = "pressed";
}

function mouseup(el) {
el.className = "raised";
}

与HTML进行整合

　　现在剩下的工作就是将这些函数与包含工具栏、图像、文本域的HTML代码组合在一起：