各不相同。用户需要学会如何使用每一种互联网应用程序。尽管大多数的互联网应用程序都不是太复杂,但一个用户需要不断地去学习应用程序界面,时时感觉自己象个新手,这对于用户而言,毕竟不是一件令人愉快的事。
通过利用javascript和CSS建立互联网应用程序或网站的标准化的客户端界面组件,可以使用户一眼就看出来他们可以进行的操作以及如何完成自己的任务。用户就会对自己的操作更有信心,也不会轻易出现误操作。
或许你还不知道javascript还有这样的功能,或曾经在其他网站上看到过工具栏,但不知道它是如何完成的。在本篇文章中,我们将讨论如何建立一个简单的、格式化工具栏(就象Word中的那样),该工具栏可以为任意的网站添加让用户通过
下面的代码使用了selection对象的createRange()方法,不幸的是,只有Windows平台上的IE4+用户才能够使用selection对象,相似的功能通过文档对象模型(DOM)才能实现,但Mozilla中的document.createRange()会发生问题,主要是在input或textarea元素中不能处理文本数据。如果这一bug解决了,就可以使下面的代码运行在Mozilla、Netscape 6+或其他任何运行Gecko的浏览器平台上。
我们首先来创建一个拥有三个按钮的简单工具条:一个粗体按钮,一个斜体按钮,一个连接按钮。该工具栏是向一个现有的文本域添加功能的好方法,它可以让用户在无需了解HTML的情况下对输入的文本进行简单的控制。任何让用户参与或进行反馈的网站都可以利用这一工具栏进行加强。
我们的工具栏在功能上可以分为下面4个部分:
・封装选定文本附件HTML标记的javascript函数
・定制工具栏、按钮的外观和风格的样式表
・响应鼠标事件的javascript函数
・包含工具栏代码、图像、表格元素的HTML
我们首先来研究一下二个处理向<textarea>插入HTML代码的函数:
利用javascript处理文本集
function format_sel(v) { var str = document.selection.createRange().text; document.my_form.my_textarea.focus(); var sel = document.selection.createRange(); sel.text = "<" + v + ">" + str + "<" + v + ">"; return; } |