大多数的计算机用户都非常熟悉Windows的图形用户界面（GUI）都通过使用Word或微软的电子邮件客户端软件了解了按钮工具条标签但与客户端软件都拥有几乎一致的界面截然不同的是我们可以发现每个网站的界面都各不相同用户需要学会如何使用每一种互联网应用程序尽管大多数的互联网应用程序都不是太复杂但一个用户需要不断地去学习应用程序界面时时感觉自己象个新手这对于用户而言毕竟不是一件令人愉快的事
通过利用JavaScript和CSS建立互联网应用程序或网站的标准化的客户端界面组件可以使用户一眼就看出来他们可以进行的操作以及如何完成自己的任务用户就会对自己的操作更有信心也不会轻易出现误操作
或许你还不知道JavaScript还有这样的功能或曾经在其他网站上看到过工具栏但不知道它是如何完成的在本篇文章中我们将讨论如何建立一个简单的格式化工具栏（就象Word中的那样）该工具栏可以为任意的网站添加让用户通过<textarea>区进行反馈的功能本篇文章介绍的技巧需要读者具备有HTMLCSS和JavaScript方面的知识
一点不足之处
下面的代码使用了selection对象的createRange()方法不幸的是只有Windows平台上的IE+用户才能够使用selection对象相似的功能通过文档对象模型（DOM）才能实现但Mozilla中的documentcreateRange()会发生问题主要是在input或textarea元素中不能处理文本数据如果这一bug解决了就可以使下面的代码运行在MozillaNetscape +或其他任何运行Gecko的浏览器平台上
建立一个简单的工具栏
我们首先来创建一个拥有三个按钮的简单工具条一个粗体按钮一个斜体按钮一个连接按钮该工具栏是向一个现有的文本域添加功能的好方法它可以让用户在无需了解HTML的情况下对输入的文本进行简单的控制任何让用户参与或进行反馈的网站都可以利用这一工具栏进行加强
我们的工具栏在功能上可以分为下面个部分
·封装选定文本附件HTML标记的JavaScript函数
·定制工具栏按钮的外观和风格的样式表
·响应鼠标事件的JavaScript函数
·包含工具栏代码图像表格元素的HTML
我们首先来研究一下二个处理向<textarea>插入HTML代码的函数
利用JavaScript处理文本集
function format_sel(v) {
var str = documentselectioncreateRange()text;
documentmy_formmy_textareafocus();
var sel = documentselectioncreateRange();
seltext = < + v + > + str + < + v + >;
return;
}
format_sel()只接受一个参数即表示作用于选定文本的HTML标记的字符串在这个工具栏中我们用这个函数来控制<b>和<i>之间的文本当然如果愿意我们可以使用<strong>和<em>替换<b>和<i>或者使用这个函数控制一段选定的文本或者在选择的标记中限定指定文本
我们可以使用selection对象的createRange()方法方便地创建当前文本的TextRange对象通过访问其text属性我们可以得到<textarea>中选定的文本text属性将被赋给一个局部变量在下一行中我们对<textarea>调用了focus()这一行代码非常重要否则我们对文本的改变可能会被写到网页的其他部分去最后我们创建了指定文本的另一个引用并赋给它一个新值即位于适当的HTML标记中的原来的selection的地址
function insert_link() {
var str = documentselectioncreateRange()text;
documentmy_formmy_textareafocus();
var my_link = prompt(Enter URL://);
if (my_link != null) {
var sel = documentselectioncreateRange();
seltext = <a href=\ + my_link + \> + str + </a>;
}
return;
}
第二个函数insert_link()与format_sel()是相同的加上prompt()它们可以使用户输入一个超文本链接的值使用prompt()的结果我们可以将选定的文本和代码组合起来创建一个连接有了这些函数我们就可以为用户创建所有类型的界面下面我们来看一个例子
在CSS中使用系统颜色
在网站上使用上面函数的最简单的方法就是在bolditalic和link按钮的onclick事件处理程序中调用这些函数但这不够刺激由于我们使用了selection对象把自己限定在了IE/Win平台上我们就应该充分利用IE的特性在CSS中使用用户定义的系统颜色创建象我们在其他软件中看到的那样的动态按钮下面我们首先来看看定义了工具栏按钮升起和按下二种按钮的状态的样式表
toolbar {
margin: ;
padding: ;
width: px;
background: buttonface;
bordertop: px solid buttonhighlight;
borderleft: px solid buttonhighlight;
borderbottom: px solid buttonshadow;
borderright: px solid buttonshadow;
textalign:right;
}
button {
background: buttonface;
border: px solid buttonface;
margin: ;
}
raised {
bordertop: px solid buttonhighlight;
borderleft: px solid buttonhighlight;
borderbottom: px solid buttonshadow;
borderright: px solid buttonshadow;
background: buttonface;
margin: ;
}
pressed {
bordertop: px solid buttonshadow;
borderleft: px solid buttonshadow;
borderbottom: px solid buttonhighlight;
borderright: px solid buttonhighlight;
background: buttonface;
margin: ;
}
读者可能已经注意到我们在样式表中使用了三种系统颜色引用buttonfacebuttonshadow和buttonhighlight通过将buttonface作为工具栏和按钮的背景色我们可以使用用户得到与其他应用软件相同的界面外观用buttonshadow和buttonhighlight色创建边界通过编写简单的JavaScript函数就能使按钮具有D效果当然如果想使该GUI更与网站而不是用户的浏览器匹配可以更换适当的颜色
能够改变按钮样式的JavaScript下面的四个函数供事件处理程序在改变鼠标事件图像的类名时使用尽管可以把JavaScript代码编写成嵌入式的但我们把它们组织进一个函数中方便以后添加其他功能
function mouseover(el) {
elclassName = raised;
}
function mouseout(el) {
elclassName = button;
}
function mousedown(el) {
elclassName = pressed;
}
function mouseup(el) {
elclassName = raised;
}
与HTML进行整合
现在剩下的工作就是将这些函数与包含工具栏图像文本域的HTML代码组合在一起
一个div中包含了三个按钮的图像这样会使代码显得简洁函数调用在<img>标记的事件处理程序中我们向格式化函数传递一个将被改变样式的元素的引用根据希望使用的格式（b表示粗体i表示斜体）我们向format_sel()函数传递一个合适的参数 结束语
当然这只是创建工具栏的一种方法还有许多其他方法也可以创建工具栏读者创建的工具栏的功能也不必局限于本篇文章中涉及的功能利用WC DOM可以很方便地改变一个文档的样式
利用DOM操作我们可以建立一个Word风格的工具栏让用户定制显示卡的所有方面改变字体的大小文档的字体改变栏目的宽度结合使用CSSJavaScript和DOM我们能够创建与标准浏览器兼容的功能强大的应用软件GUI
