怎樣用javascript建立功能強大的GUI

大多數的電腦使用者都非常熟悉Windows的圖形化使用者介面（GUI），都通過使用Word或微軟的電子郵件用戶端軟體瞭解了按鈕、工具條、標籤，但與用戶端軟體都擁有幾乎一致的介面截然不同的是，我們可以發現，每個網站的介面都各不相同。使用者需要學會如何使用每一種互連網應用程式。儘管大多數的互連網應用程式都不是太複雜，但一個使用者需要不斷地去學習應用程式介面，時時感覺自己象個新手，這對於使用者而言，畢竟不是一件令人愉快的事。

通過利用JavaScript和CSS建立互連網應用程式或網站的標準化的用戶端介面組件，可以使使用者一眼就看出來他們可以進行的操作以及如何完成自己的任務。使用者就會對自己的操作更有信心，也不會輕易出現誤操作。

或許你還不知道JavaScript還有這樣的功能，或曾經在其他網站上看到過工具列，但不知道它是如何完成的。在本篇文章中，我們將討論如何建立一個簡單的、格式化工具列（就象Word中的那樣），該工具列可以為任意的網站添加讓使用者通過<textarea>區進行反饋的功能。本篇文章介紹的技巧需要讀者具備有HTML、CSS和JavaScript方面的知識。

一點不足之處

下面的代碼使用了selection對象的createRange()方法，不幸的是，只有Windows平台上的IE4+使用者才能夠使用selection對象，相似的功能通過文件物件模型（DOM）才能實現，但Mozilla中的document.createRange()會發生問題，主要是在input或textarea元素中不能處理文本資料。如果這一bug解決了，就可以使下面的代碼運行在Mozilla、Netscape 6+或其他任何運行Gecko的瀏覽器平台上。

建立一個簡單的工具列

我們首先來建立一個擁有三個按鈕的簡單工具條：一個粗體按鈕，一個斜體按鈕，一個連線按鍵。該工具列是向一個現有的文本域添加功能的好方法，它可以讓使用者在無需瞭解HTML的情況下對輸入的文本進行簡單的控制。任何讓使用者參與或進行反饋的網站都可以利用這一工具列進行加強。

我們的工具列在功能上可以分為下面4個部分：

·封裝選定文本附件HTML標記的JavaScript函數

·定製工具列、按鈕的外觀和風格的樣式表

·響應滑鼠事件的JavaScript函數

·包含工具列代碼、映像、表格元素的HTML

我們首先來研究一下二個處理向<textarea>插入HTML代碼的函數：

利用JavaScript處理文本集

function format_sel(v) { var str = document.selection.createRange().text; document.my_form.my_textarea.focus(); var sel = document.selection.createRange(); sel.text = "<" + v + ">" + str + "<" + v + ">"; return; }

format_sel()只接受一個參數，即表示作用於選定文本的HTML標記的字串。在這個工具列中，我們用這個函數來控制<b>和<i>之間的文本。當然，如果願意，我們可以使用<strong>和<em>替換<b>和<i>，或者使用這個函數控制一段選定的文本，或者在選擇的標記中限定指定文本。

我們可以使用selection對象的createRange()方法方便地建立當前文本的TextRange對象。通過訪問其text屬性，我們可以得到<textarea>中選定的文本。text屬性將被賦給一個局部變數。在下一行中，我們對<textarea>調用了focus()，這一行代碼非常重要，否則，我們對文本的改變可能會被寫到網頁的其他部分去。最後，我們建立了指定文本的另一個引用，並賦給它一個新值：即位於適當的HTML標記中的原來的selection的地址。

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

讀者可能已經注意到，我們在樣式表中使用了三種系統色彩引用：buttonface、buttonshadow和buttonhighlight。通過將buttonface作為工具列和按鈕的背景色，我們可以使用使用者得到與其他應用軟體相同的介面外觀。用buttonshadow和buttonhighlight色建立邊界，通過編寫簡單的JavaScript函數，就能使按鈕具有3D效果。當然，如果想使該GUI更與網站而不是使用者的瀏覽器匹配，可以更換適當的顏色。

能夠改變按鈕樣式的JavaScript下面的四個函數供事件處理常式在改變滑鼠事件映像的類名時使用。儘管可以把JavaScript代碼編寫成嵌入式的，但我們把它們組織進一個函數中，方便以後添加其他功能。

function mouseover(el) { el.className = "raised"; } function mouseout(el) { el.className = "button"; } function mousedown(el) { el.className = "pressed"; } function mouseup(el) { el.className = "raised"; }

與HTML進行整合

現在剩下的工作就是將這些函數與包含工具列、映像、文本域的HTML程式碼群組合在一起：

一個div中包含了三個按鈕的映像，這樣會使代碼顯得簡潔。函數調用在<img>標記的事件處理常式中，我們向格式化函數傳遞一個將被改變樣式的元素的引用，根據希望使用的格式（b表示粗體，i表示斜體），我們向format_sel()函數傳遞一個合適的參數。

結束語

當然，這隻是建立工具列的一種方法，還有許多其他方法也可以建立工具列。讀者建立的工具列的功能也不必局限於本篇文章中涉及的功能，利用W3C DOM，可以很方便地改變一個文檔的樣式。

利用DOM操作，我們可以建立一個Word風格的工具列，讓使用者定製顯示卡的所有方面：改變字型的大小、文檔的字型、改變欄目的寬度。結合使用CSS、JavaScript和DOM，我們能夠建立與標準瀏覽器安全色的功能強大的應用軟體GUI。