利用javascript建立功能強大的GUI(3)

來源:互聯網
上載者:User
建立 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;
}



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.