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

Javascript
11款基于Javascript的文件管理器
5款Javascript颜色选择器
JavaScript 对话框和状态栏使用说明
状态栏 时间显示效果 数字钟
在图片上单击获取图片原始大小
禁止在图片上使用右键
javascript 操作Word和Excel的实现代码
几个javascript操作word的参考代码
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
解决表单中第一个非隐藏的元素获得焦点的一个方案
解决jquery .ajax 在IE下卡死问题的解决方法
javascript 实现划词标记划词搜索功能
用Greasemonkey 脚本收藏网站会员信息到本地
javascript 关于# 和 void的区别分析
DIV+CSS+JS 变灰弹出层
Ajax+Json 级联菜单实现代码
javascript 读取XML数据，在页面中展现、编辑、保存的实现
html 锁定页面(js遮罩层弹出div效果)
基于jQuery的日期选择控件
javascript获得CheckBoxList选中的数量

No. « 267 268 269 270 »

技术文章搜索

关键字

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

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

function insert_link() {
var str = document.selection.createRange().text;
document.my_form.my_textarea.focus();
var my_link = prompt("Enter URL:","http://");
if (my_link != null) {
var sel = document.selection.createRange();
sel.text = "<a href=\"" + my_link + "\">" + str + "</a>";
}
return;
}

　　第二个函数insert_link()与format_sel()是相同的，加上prompt()，它们可以使用户输入一个超文本链接的值。使用prompt()的结果，我们可以将选定的文本和代码组合起来，创建一个连接。有了这些函数，我们就可以为用户创建所有类型的界面。下面我们来看一个例子。

在CSS中使用系统颜色

　　在网站上使用上面函数的最简单的方法就是在“bold”、“italic”、和“link”按钮的onclick事件处理程序中调用这些函数，但这不够刺激。由于我们使用了selection对象，把自己限定在了IE/Win平台上，我们就应该充分利用IE的特性，在CSS中使用用户定义的系统颜色，创建象我们在其他软件中看到的那样的动态按钮。下面我们首先来看看定义了工具栏、按钮、升起和按下二种按钮的状态的样式表。

#toolbar {
margin: 0;
padding: 0;
width: 262px;
background: buttonface;
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-bottom: 1px solid buttonshadow;
border-right: 1px solid buttonshadow;
text-align:right;
}

.button {
background: buttonface;
border: 1px solid buttonface;
margin: 1;
}

.raised {
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-bottom: 1px solid buttonshadow;
border-right: 1px solid buttonshadow;
background: buttonface;
margin: 1;
}

.pressed {
border-top: 1px solid buttonshadow;
border-left: 1px solid buttonshadow;
border-bottom: 1px solid buttonhighlight;
border-right: 1px solid buttonhighlight;
background: buttonface;
margin: 1;
}