| 首页 | IT动态 | 硬件 | 应用 | 互联网 | 网络 | 网站 | 黑客 | 编程 | 数码 | 视频教程 | 游戏 | 休闲 | 软件 | 视频 | IT认证 | 动漫图片 | IT杂谈 | 论坛 | 
Google
专 题 栏 目
最 新 热 门
最 新 推 荐
相 关 文 章
  • 认清CSS的类class和标识id选…

  • HTML中小meta的大作用

  • Dreamweaver8搞定“web标准”

  • Dreamweaver临时文件工作方式

  • Dreamweaver制作网页实用七招

  • 用ASP生成XBM数字图片(可用…

  • DW MX实例:插入Anfy Java特…

  • DW MX实例:Flash个性播放界…

  • DW MX实例:添加透明背景的F…

  • DW MX实例:插入Flash按钮与…

  • 广 告 位 置
    黄金广告位
    Q
    您现在的位置: 无忧IT人 >> 网站 >> JSP >> 文章正文
    利用javascript创建功能强大的GUI(2)           
    利用javascript创建功能强大的GUI(2)
    作者:网络 文章来源:转载 点击数: 更新时间:2007-8-11
    [ 字体:缩小 正常 放大 | 双击自动滚屏 ]
    请选择合适的字体颜色:
      我们首先来创建一个拥有三个按钮的简单工具条:一个粗体按钮,一个斜体按钮,一个连接按钮。该工具栏是向一个现有的文本域添加功能的好方法,它可以让用户在无需了解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;
    }
      format_sel()只接受一个参数,即表示作用于选定文本的HTML标记的字符串。在这个工具栏中,我们用这个函数来控制<b>和<i>之间的文本。当然,如果愿意,我们可以使用<strong>和<em>替换<b>和<i>,或者使用这个函数控制一段选定的文本,或者在选择的标记中限定指定文本。

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

    [1]

    文章录入:51iter    责任编辑:51iter 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    | 设为首页 | 加入收藏 | 联系站长 | 关于我们 | 友情链接 | 版权申明 |