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

Javascript
jquery 交替为表格添加样式的代码
jquery下操作HTML控件的实现代码
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
海量经典的jQuery插件集合
JavaScript获取鼠标坐标的函数（兼容IE、FireFox、Chrome）
JavaScript关于select的相关操作说明
jQuery的一些特性和用法整理小结
用jQuery扩展自写的 UI导航
JQuery 引发两次$(document.ready)事件
javascript实现的基于金山词霸网络翻译的代码
Span元素的width属性无效果原因及解决方案
javascript 不间断的图片滚动并可点击
利用onresize使得div可以随着屏幕大小而自适应的代码
extjs 为某个事件设置拦截器
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
javascript 特性检测并非浏览器检测
20个非常有用的PHP类库 加速php开发
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
AJAX的跨域与JSONP(为文章自动添加短址的功能)
JavaScript学习笔记（十）

No. « 277 278 279 280 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-11-03   浏览: 60 ::
收藏到网摘: 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;
}