利用JavaScript创建功能强大的GUI(4)

高跟鞋宇姐

高跟鞋宇姐

2016-01-29 11:43

利用JavaScript创建功能强大的GUI(4),利用JavaScript创建功能强大的GUI(4)
  读者可能已经注意到,我们在样式表中使用了三种系统颜色引用: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代码组合在一起:
展开更多 50%)
分享

猜你喜欢

利用JavaScript创建功能强大的GUI(4)

电脑网络
利用JavaScript创建功能强大的GUI(4)

利用JavaScript创建功能强大的GUI(3)

电脑网络
利用JavaScript创建功能强大的GUI(3)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

利用JavaScript创建功能强大的GUI(5)

电脑网络
利用JavaScript创建功能强大的GUI(5)

利用JavaScript创建功能强大的GUI(1)

电脑网络
利用JavaScript创建功能强大的GUI(1)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

利用JavaScript创建功能强大的GUI(2)

电脑网络
利用JavaScript创建功能强大的GUI(2)

AJAX和J2EE创建功能强大的瘦客户端

Web开发
AJAX和J2EE创建功能强大的瘦客户端

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

学好标准CSS的模型是否必须放弃IE?

学好标准CSS的模型是否必须放弃IE?

源码学习:一个简单的日历控件(5)

源码学习:一个简单的日历控件(5)
下拉加载更多内容 ↓