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

大多数的计算机用户都非常熟悉Windows的图形用户界面（GUI），都通过使用Word或微软的电子邮件客户端软件了解了按钮、工具条、标签，但与客户端软件都拥有几乎一致的界面截然不同的是，我们可以发现，每个网站的界面都各不相同。用户需要学会如何使用每一种互联网应用程序。尽管大多数的互联网应用程序都不是太复杂，但一个用户需要不断地去学习应用程序界面，时时感觉自己象个新手，这对于用户而言，毕竟不是一件令人愉快的事。

通过利用JavaScript和CSS建立互联网应用程序或网站的标准化的客户端界面组件，可以使用户一眼就看出来他们可以进行的操作以及如何完成自己的任务。用户就会对自己的操作更有信心，也不会轻易出现误操作。

或许你还不知道JavaScript还有这样的功能，或曾经在其他网站上看到过工具栏，但不知道它是如何完成的。在本篇文章中，我们将讨论如何建立一个简单的、格式化工具栏（就象Word中的那样），该工具栏可以为任意的网站添加让用户通过区进行反馈的功能。本篇文章介绍的技巧需要读者具备有HTML、CSS和JavaScript方面的知识。 <br /><br />一点不足之处 <br /><br />下面的代码使用了selection对象的createRange()方法，不幸的是，只有Windows平台上的IE4+用户才能够使用selection对象，相似的功能通过文档对象模型（DOM）才能实现，但Mozilla中的document.createRange()会发生问题，主要是在input或textarea元素中不能处理文本数据。如果这一bug解决了，就可以使下面的代码运行在Mozilla、Netscape 6+或其他任何运行Gecko的浏览器平台上。 <br /><br />建立一个简单的工具栏 <br /><br /><br /><br /><br /><br />我们首先来创建一个拥有三个按钮的简单工具条：一个粗体按钮，一个斜体按钮，一个连接按钮。该工具栏是向一个现有的文本域添加功能的好方法，它可以让用户在无需了解HTML的情况下对输入的文本进行简单的控制。任何让用户参与或进行反馈的网站都可以利用这一工具栏进行加强。 <br /><br />我们的工具栏在功能上可以分为下面4个部分： <br /><br />?封装选定文本附件HTML标记的JavaScript函数 <br /><br />?定制工具栏、按钮的外观和风格的样式表 <br /><br />?响应鼠标事件的JavaScript函数 <br /><br />?包含工具栏代码、图像、表格元素的HTML <br /><br />我们首先来研究一下二个处理向<textarea>插入HTML代码的函数： <br /><br />利用JavaScript处理文本集 <br /><br />function format_sel(v) {<br />var str = document.selection.createRange().text;<br />document.my_form.my_textarea.focus();<br />var sel = document.selection.createRange();<br />sel.text = "<" + v + ">" + str + "<" + v + ">";<br />return;<br />} <br /><br /><br />format_sel()只接受一个参数，即表示作用于选定文本的HTML标记的字符串。在这个工具栏中，我们用这个函数来控制<b>和<i>之间的文本。当然，如果愿意，我们可以使用<strong>和<em>替换<b>和<i>，或者使用这个函数控制一段选定的文本，或者在选择的标记中限定指定文本。 <br /><br />我们可以使用selection对象的createRange()方法方便地创建当前文本的TextRange对象。通过访问其text属性，我们可以得到<textarea>中选定的文本。text属性将被赋给一个局部变量。在下一行中，我们对<textarea>调用了focus()，这一行代码非常重要，否则，我们对文本的改变可能会被写到网页的其他部分去。最后，我们创建了指定文本的另一个引用，并赋给它一个新值：即位于适当的HTML标记中的原来的selection的地址。 <br /><br />function insert_link() {<br />var str = document.selection.createRange().text;<br />document.my_form.my_textarea.focus();<br />var my_link = prompt("Enter URL:","http://");<br />if (my_link != null) {<br />var sel = document.selection.createRange();<br />sel.text = "" + str + "";<br />}<br />return;<br />} <br /><br /><br />第二个函数insert_link()与format_sel()是相同的，加上prompt()，它们可以使用户输入一个超文本链接的值。使用prompt()的结果，我们可以将选定的文本和代码组合起来，创建一个连接。有了这些函数，我们就可以为用户创建所有类型的界面。下面我们来看一个例子。 <br /><br />在CSS中使用系统颜色 <br /><br />在网站上使用上面函数的最简单的方法就是在“bold”、“italic”、和“link”按钮的onclick事件处理程序中调用这些函数，但这不够刺激。由于我们使用了selection对象，把自己限定在了IE/Win平台上，我们就应该充分利用IE的特性，在CSS中使用用户定义的系统颜色，创建象我们在其他软件中看到的那样的动态按钮。下面我们首先来看看定义了工具栏、按钮、升起和按下二种按钮的状态的样式表。 <br /><br />#toolbar { <br />margin: 0;<br />padding: 0;<br />width: 262px;<br />background: buttonface;<br />border-top: 1px solid buttonhighlight;<br />border-left: 1px solid buttonhighlight;<br />border-bottom: 1px solid buttonshadow;<br />border-right: 1px solid buttonshadow;<br />text-align:right;<br />}<br /><br />.button {<br />background: buttonface; <br />border: 1px solid buttonface;<br />margin: 1; <br />}<br /><br />.raised { <br />border-top: 1px solid buttonhighlight;<br />border-left: 1px solid buttonhighlight;<br />border-bottom: 1px solid buttonshadow;<br />border-right: 1px solid buttonshadow;<br />background: buttonface;<br />margin: 1;<br />}<br /><br />.pressed {<br />border-top: 1px solid buttonshadow;<br />border-left: 1px solid buttonshadow;<br />border-bottom: 1px solid buttonhighlight;<br />border-right: 1px solid buttonhighlight;<br />background: buttonface;<br />margin: 1;<br />} <br /><br /><br />读者可能已经注意到，我们在样式表中使用了三种系统颜色引用：buttonface、buttonshadow和buttonhighlight。通过将buttonface作为工具栏和按钮的背景色，我们可以使用用户得到与其他应用软件相同的界面外观。用buttonshadow和buttonhighlight色创建边界，通过编写简单的JavaScript函数，就能使按钮具有3D效果。当然，如果想使该GUI更与网站而不是用户的浏览器匹配，可以更换适当的颜色。 <br /><br />能够改变按钮样式的JavaScript下面的四个函数供事件处理程序在改变鼠标事件图像的类名时使用。尽管可以把JavaScript代码编写成嵌入式的，但我们把它们组织进一个函数中，方便以后添加其他功能。 <br /><br />function mouseover(el) {<br />el.className = "raised";<br />}<br /><br />function mouseout(el) {<br />el.className = "button";<br />}<br /><br />function mousedown(el) {<br />el.className = "pressed";<br />}<br /><br />function mouseup(el) {<br />el.className = "raised";<br />} <br /><br /><br />与HTML进行整合 <br /><br />现在剩下的工作就是将这些函数与包含工具栏、图像、文本域的HTML代码组合在一起： <br /><br /><br /><br /><br /><img class="button" <br />onmouseover="mouseover(this);" <br />onmouseout="mouseout(this);" <br />onmousedown="mousedown(this);" <br />onmouseup="mouseup(this);" <br />onclick="format_sel(´b´);" <br />src="bold.gif" <br />width="16" height="16" <br />align="middle" <br />alt="click to make your selection bold"><br /><img class="button" <br />onmouseover="mouseover(this);" <br />onmouseout="mouseout(this);" <br />onmousedown="mousedown(this);" <br />onmouseup="mouseup(this);" <br />onclick="format_sel(´i´);" <br />src="italic.gif" <br />width="16" height="16" <br />align="middle" <br />alt="click to make your selection italic"><br /><img class="button" <br />onmouseover="mouseover(this);" <br />onmouseout="mouseout(this);" <br />onmousedown="mousedown(this);" <br />onmouseup="mouseup(this);" <br />onclick="insert_link();" <br />src="link.gif" <br />width="32" height="16" <br />align="middle" <br />alt="click to add a link"><br /><br /><textarea cols="30" rows="6" name="my_textarea">



一个div中包含了三个按钮的图像，这样会使代码显得简洁。函数调用在标记的事件处理程序中，我们向格式化函数传递一个将被改变样式的元素的引用，根据希望使用的格式（b表示粗体，i表示斜体），我们向format_sel()函数传递一个合适的参数。

结束语

当然，这只是创建工具栏的一种方法，还有许多其他方法也可以创建工具栏。读者创建的工具栏的功能也不必局限于本篇文章中涉及的功能，利用W3C DOM，可以很方便地改变一个文档的样式。

利用DOM操作，我们可以建立一个Word风格的工具栏，让用户定制显示卡的所有方面：改变字体的大小、文档的字体、改变栏目的宽度。结合使用CSS、JavaScript和DOM，我们能够创建与标准浏览器兼容的功能强大的应用软件GUI。[@more@]