| 利用javascript创建功能强大的GUI(3) |
|
| 利用javascript创建功能强大的GUI(3) |
|
作者：网络 文章来源：转载 点击数： 更新时间：2006-1-4  |
| [ 字体：缩小 正常 放大 | 双击自动滚屏 ] |
请选择合适的字体颜色：
|
|
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;
}
[1]
|
|
| 文章录入：54iter 责任编辑：54iter |
上一篇文章： 利用javascript创建功能强大的GUI(2)
下一篇文章： 利用javascript创建功能强大的GUI(4) |
| 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
