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

Javascript
javascript实现的鼠标悬停时动态翻滚的导航条
通过隐藏option实现select的联动效果
jquery 输入框数字限制插件
文字来回上下移动或跳动的代码
JS旋转的彩色文字轮转特效
不一样的文字闪烁 轮番闪烁
Javascript 解疑
jQuery 白痴级入门教程
Jquery在IE7下无法使用 $.ajax解决方法
javascript 日期常用的方法
ASP中进行HTML数据及JS数据编码函数
JS 中document.URL 和 windows.location.href 的区别
跨域表单提交状态的变相判断代码
JS解析XML的实现代码
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Javascript 定时器调用传递参数的方法
把html页面的部分内容保存成新的html文件的jquery代码
XHTML下,JS浮动代码失效的问题
两个select之间option的互相添加操作(jquery实现)
Jquery 获取表单text,areatext,radio,checkbox,select值的代码

No. « 273 274 275 276 »

技术文章搜索

关键字

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

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