建立 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;
}