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

80酷酷网    80kuku.com

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

  我们的工具栏在功能上可以分为下面4个部分:
  ·封装选定文本附件HTML标记的函数
  ·定制工具栏、按钮的外观和风格的样式表
  ·响应鼠标事件的函数
  ·包含工具栏代码、图像、表格元素的HTML

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

  利用处理文本集

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

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



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击:3