当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 利用JavaScript创建功能强大的GUI(2)

Javascript
用javascript实现的图片马赛克后显示并切换加文字功能
通用的javascript　换行色换列色的小js
滑动门,简洁,新手上路制作篇 (小鸽子系列)
文字模糊特效
javascript实现的又一个不错的滑动导航效果
css实现的图片模糊效果
javascript跟随鼠标x,y坐标移动的字效果
js实现用于建立新的一行且增加的四个文本框为空的且被禁用
XML+XSL 与 HTML 两种方案的结合
javascript生成/解析dom的CDATA类型的字段的代码
IE与FireFox的兼容性问题分析
关于脚本操作文本域的问题
刷新时清空文本框内容的js代码
又一个不错的js浮动广告代码
网页背景渐变效果代码
非常漂亮的让背景如此暗淡（一种弹出提示信息时页面背景色调改变的方法）
[原创]jser必看的破解javascript各种加密的反向思维方法
eval(function(p,a,c,k,e,d)系列解密javascript程序
从sohu弄下来的flash中展示图片的代码
漂亮的widgets，支持换肤和后期开发新皮肤（2007-4-27已更新1.7alpha）

No. « 63 64 65 66 »

技术文章搜索

关键字

Javascript 中的 利用JavaScript创建功能强大的GUI(2)

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-11-03   浏览: 329 ::
收藏到网摘: n/a

　　我们首先来创建一个拥有三个按钮的简单工具条：一个粗体按钮，一个斜体按钮，一个连接按钮。该工具栏是向一个现有的文本域添加功能的好方法，它可以让用户在无需了解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的地址。