利用JavaScript創建功能強大的GUI

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

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

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

一點不足之處

　　下面的代碼使用了selection對象的createRange()方法不幸的是只有Windows平台上的IE+用戶才能夠使用selection對象相似的功能通過文檔對象模型（DOM）才能實現但Mozilla中的documentcreateRange()會發生問題主要是在input或textarea元素中不能處理文本數據如果這一bug解決了就可以使下面的代碼運行在MozillaNetscape +或其他任何運行Gecko的浏覽器平台上

建立一個簡單的工具欄

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

　　我們的工具欄在功能上可以分為下面個部分
　　·封裝選定文本附件HTML標記的JavaScript函數
　　·定制工具欄按鈕的外觀和風格的樣式表
　　·響應鼠標事件的JavaScript函數
　　·包含工具欄代碼圖像表格元素的HTML

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

　　利用JavaScript處理文本集

function format_sel(v) {
var str = documentselectioncreateRange()text;
documentmy_formmy_textareafocus();
var sel = documentselectioncreateRange();
seltext = < + 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 = documentselectioncreateRange()text;
documentmy_formmy_textareafocus();
var my_link = prompt(Enter URL://);
if (my_link != null) {
var sel = documentselectioncreateRange();
seltext = <a href=\ + my_link + \> + str + </a>;
}
return;
}

　　第二個函數insert_link()與format_sel()是相同的加上prompt()它們可以使用戶輸入一個超文本鏈接的值使用prompt()的結果我們可以將選定的文本和代碼組合起來創建一個連接有了這些函數我們就可以為用戶創建所有類型的界面下面我們來看一個例子

在CSS中使用系統顏色

　　在網站上使用上面函數的最簡單的方法就是在bolditalic和link按鈕的onclick事件處理程序中調用這些函數但這不夠刺激由於我們使用了selection對象把自己限定在了IE/Win平台上我們就應該充分利用IE的特性在CSS中使用用戶定義的系統顏色創建象我們在其他軟件中看到的那樣的動態按鈕下面我們首先來看看定義了工具欄按鈕升起和按下二種按鈕的狀態的樣式表

　　toolbar {
margin: ;
padding: ;
width: px;
background: buttonface;
bordertop: px solid buttonhighlight;
borderleft: px solid buttonhighlight;
borderbottom: px solid buttonshadow;
borderright: px solid buttonshadow;
textalign:right;
}

button {
background: buttonface;
border: px solid buttonface;
margin: ;
}

raised {
bordertop: px solid buttonhighlight;
borderleft: px solid buttonhighlight;
borderbottom: px solid buttonshadow;
borderright: px solid buttonshadow;
background: buttonface;
margin: ;
}

pressed {
bordertop: px solid buttonshadow;
borderleft: px solid buttonshadow;
borderbottom: px solid buttonhighlight;
borderright: px solid buttonhighlight;
background: buttonface;
margin: ;
}

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

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

function mouseover(el) {
elclassName = raised;
}

function mouseout(el) {
elclassName = button;
}

function mousedown(el) {
elclassName = pressed;
}

function mouseup(el) {
elclassName = raised;
}
與HTML進行整合

　　現在剩下的工作就是將這些函數與包含工具欄圖像文本域的HTML代碼組合在一起

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

結束語

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

　　利用DOM操作我們可以建立一個Word風格的工具欄讓用戶定制顯示卡的所有方面改變字體的大小文檔的字體改變欄目的寬度結合使用CSSJavaScript和DOM我們能夠創建與標准浏覽器兼容的功能強大的應用軟件GUI

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19498.html