您现在正在浏览：站长之家 >> 设计编程 >> 详细内容

利用JavaScript创建功能强大的GUI

时间:2007-12-27 来源:不详作者:林子

大多数的计算机用户都非常熟悉Windows的图形用户界面（GUI），都通过使用Word或微软的电子邮件客户端软件了解了按钮、工具条、标签，但与客户端软件都拥有几乎一致的界面截然不同的是，我们可以发现，每个网站的界面都

各不相同。用户需要学会如何使用每一种互联网应用程序。尽管大多数的互联网应用程序都不是太复杂，但一个用户需要不断地去学习应用程序界面，时时感觉自己象个新手，这对于用户而言，究竟不是一件令人愉快的事。 copyright dedecms

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

本文来自织梦

　　或许你还不知道javascript还有这样的功能，或曾经在其他网站上看到过工具栏，但不知道它是如何完成的。在本篇文章中，我们将讨论如何建立一个简单的、格式化工具栏（就象Word中的那样），该工具栏可以为任意的网站添加让用户通过<textarea>区进行反馈的功能。本篇文章介绍的技巧需要读者具备有HTML、CSS和javascript方面的知识。

一点不足之处

织梦内容管理系统

　　下面的代码使用了selection对象的createRange()方法，不幸的是，只有Windows平台上的IE4 用户才能够使用selection对象，相似的功能通过文档对象模型（DOM）才能实现，但Mozilla中的document.createRange()会发生问题，主要是在input或textarea元素中不能处理文本数据。假如这一bug解决了，就可以使下面的代码运行在Mozilla、Netscape 6 或其他任何运行Gecko的浏览器平台上。

织梦内容管理系统

建立一个简单的工具栏

织梦内容管理系统

　　我们首先来创建一个拥有三个按钮的简单工具条：一个粗体按钮，一个斜体按钮，一个连接按钮。该工具栏是向一个现有的文本域添加功能的好方法，它可以让用户在无需了解HTML的情况下对输入的文本进行简单的控制。任何让用户参与或进行反馈的网站都可以利用这一工具栏进行加强。

　　我们的工具栏在功能上可以分为下面4个部分：
　　ⷥ𐁨ㅩɥ𖇦𜬩𙄤𛶈TML标记的javascript函数
　　ⷥ趥𗥥左ϣf쉩𒮧𚄥䖨炥𒌩㎦༧𚄦෥𜏨ᨠ
　　ⷥ𓍥𚔩𜠦Ǥ𚋤𛶧𚄪avascript函数
　　ⷥ셥𐫥𗥥左Ϥ𛣧ce𛾥㏣hᨦ༥僧𔠧𚄈TML

本文来自织梦

　　我们首先来研究一下二个处理向<textarea>插入HTML代码的函数：

织梦好，好织梦

　　利用javascript处理文本集

dedecms.com

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;
} 内容来自dedecms

　　format_sel()只接受一个参数，即表示作用于选定文本的HTML标记的字符串。在这个工具栏中，我们用这个函数来控制<b>和<i>之间的文本。当然，假如愿意，我们可以使用<strong>和<em>替换<b>和<i>，或者使用这个函数控制一段选定的文本，或者在选择的标记中限定指定文本。 copyright dedecms

　　我们可以使用selection对象的createRange()方法方便地创建当前文本的TextRange对象。通过访问其text属性，我们可以得到<textarea>中选定的文本。text属性将被赋给一个局部变量。在下一行中，我们对<textarea>调用了focus()，这一行代码非常重要，否则，我们对文本的改变可能会被写到网页的其他部分去。最后，我们创建了指定文本的另一个引用，并赋给它一个新值：即位于适当的HTML标记中的原来的selection的地址。