利用JavaScript創(chuàng)建功能強(qiáng)大的GUI(轉(zhuǎn))

大多數(shù)的計(jì)算機(jī)用戶都非常熟悉Windows的圖形用戶界面（GUI），都通過(guò)使用Word或微軟的電子郵件客戶端軟件了解了按鈕、工具條、標(biāo)簽，但與客戶端軟件都擁有幾乎一致的界面截然不同的是，我們可以發(fā)現(xiàn)，每個(gè)網(wǎng)站的界面都各不相同。用戶需要學(xué)會(huì)如何使用每一種互聯(lián)網(wǎng)應(yīng)用程序。盡管大多數(shù)的互聯(lián)網(wǎng)應(yīng)用程序都不是太復(fù)雜，但一個(gè)用戶需要不斷地去學(xué)習(xí)應(yīng)用程序界面，時(shí)時(shí)感覺(jué)自己象個(gè)新手，這對(duì)于用戶而言，畢竟不是一件令人愉快的事。

通過(guò)利用JavaScript和CSS建立互聯(lián)網(wǎng)應(yīng)用程序或網(wǎng)站的標(biāo)準(zhǔn)化的客戶端界面組件，可以使用戶一眼就看出來(lái)他們可以進(jìn)行的操作以及如何完成自己的任務(wù)。用戶就會(huì)對(duì)自己的操作更有信心，也不會(huì)輕易出現(xiàn)誤操作。

或許你還不知道JavaScript還有這樣的功能，或曾經(jīng)在其他網(wǎng)站上看到過(guò)工具欄，但不知道它是如何完成的。在本篇文章中，我們將討論如何建立一個(gè)簡(jiǎn)單的、格式化工具欄（就象Word中的那樣），該工具欄可以為任意的網(wǎng)站添加讓用戶通過(guò)區(qū)進(jìn)行反饋的功能。本篇文章介紹的技巧需要讀者具備有HTML、CSS和JavaScript方面的知識(shí)。 <br /><br />一點(diǎn)不足之處 <br /><br />下面的代碼使用了selection對(duì)象的createRange()方法，不幸的是，只有Windows平臺(tái)上的IE4+用戶才能夠使用selection對(duì)象，相似的功能通過(guò)文檔對(duì)象模型（DOM）才能實(shí)現(xiàn)，但Mozilla中的document.createRange()會(huì)發(fā)生問(wèn)題，主要是在input或textarea元素中不能處理文本數(shù)據(jù)。如果這一bug解決了，就可以使下面的代碼運(yùn)行在Mozilla、Netscape 6+或其他任何運(yùn)行Gecko的瀏覽器平臺(tái)上。 <br /><br />建立一個(gè)簡(jiǎn)單的工具欄 <br /><br /><br /><br /><br /><br />我們首先來(lái)創(chuàng)建一個(gè)擁有三個(gè)按鈕的簡(jiǎn)單工具條：一個(gè)粗體按鈕，一個(gè)斜體按鈕，一個(gè)連接按鈕。該工具欄是向一個(gè)現(xiàn)有的文本域添加功能的好方法，它可以讓用戶在無(wú)需了解HTML的情況下對(duì)輸入的文本進(jìn)行簡(jiǎn)單的控制。任何讓用戶參與或進(jìn)行反饋的網(wǎng)站都可以利用這一工具欄進(jìn)行加強(qiáng)。 <br /><br />我們的工具欄在功能上可以分為下面4個(gè)部分： <br /><br />?封裝選定文本附件HTML標(biāo)記的JavaScript函數(shù) <br /><br />?定制工具欄、按鈕的外觀和風(fēng)格的樣式表 <br /><br />?響應(yīng)鼠標(biāo)事件的JavaScript函數(shù) <br /><br />?包含工具欄代碼、圖像、表格元素的HTML <br /><br />我們首先來(lái)研究一下二個(gè)處理向<textarea>插入HTML代碼的函數(shù)： <br /><br />利用JavaScript處理文本集 <br /><br />function format_sel(v) {<br />var str = document.selection.createRange().text;<br />document.my_form.my_textarea.focus();<br />var sel = document.selection.createRange();<br />sel.text = "<" + v + ">" + str + "<" + v + ">";<br />return;<br />} <br /><br /><br />format_sel()只接受一個(gè)參數(shù)，即表示作用于選定文本的HTML標(biāo)記的字符串。在這個(gè)工具欄中，我們用這個(gè)函數(shù)來(lái)控制<b>和<i>之間的文本。當(dāng)然，如果愿意，我們可以使用<strong>和<em>替換<b>和<i>，或者使用這個(gè)函數(shù)控制一段選定的文本，或者在選擇的標(biāo)記中限定指定文本。 <br /><br />我們可以使用selection對(duì)象的createRange()方法方便地創(chuàng)建當(dāng)前文本的TextRange對(duì)象。通過(guò)訪問(wèn)其text屬性，我們可以得到<textarea>中選定的文本。text屬性將被賦給一個(gè)局部變量。在下一行中，我們對(duì)<textarea>調(diào)用了focus()，這一行代碼非常重要，否則，我們對(duì)文本的改變可能會(huì)被寫到網(wǎng)頁(yè)的其他部分去。最后，我們創(chuàng)建了指定文本的另一個(gè)引用，并賦給它一個(gè)新值：即位于適當(dāng)?shù)腍TML標(biāo)記中的原來(lái)的selection的地址。 <br /><br />function insert_link() {<br />var str = document.selection.createRange().text;<br />document.my_form.my_textarea.focus();<br />var my_link = prompt("Enter URL:","http://");<br />if (my_link != null) {<br />var sel = document.selection.createRange();<br />sel.text = "" + str + "";<br />}<br />return;<br />} <br /><br /><br />第二個(gè)函數(shù)insert_link()與format_sel()是相同的，加上prompt()，它們可以使用戶輸入一個(gè)超文本鏈接的值。使用prompt()的結(jié)果，我們可以將選定的文本和代碼組合起來(lái)，創(chuàng)建一個(gè)連接。有了這些函數(shù)，我們就可以為用戶創(chuàng)建所有類型的界面。下面我們來(lái)看一個(gè)例子。 <br /><br />在CSS中使用系統(tǒng)顏色 <br /><br />在網(wǎng)站上使用上面函數(shù)的最簡(jiǎn)單的方法就是在“bold”、“italic”、和“l(fā)ink”按鈕的onclick事件處理程序中調(diào)用這些函數(shù)，但這不夠刺激。由于我們使用了selection對(duì)象，把自己限定在了IE/Win平臺(tái)上，我們就應(yīng)該充分利用IE的特性，在CSS中使用用戶定義的系統(tǒng)顏色，創(chuàng)建象我們?cè)谄渌浖锌吹降哪菢拥膭?dòng)態(tài)按鈕。下面我們首先來(lái)看看定義了工具欄、按鈕、升起和按下二種按鈕的狀態(tài)的樣式表。 <br /><br />#toolbar { <br />margin: 0;<br />padding: 0;<br />width: 262px;<br />background: buttonface;<br />border-top: 1px solid buttonhighlight;<br />border-left: 1px solid buttonhighlight;<br />border-bottom: 1px solid buttonshadow;<br />border-right: 1px solid buttonshadow;<br />text-align:right;<br />}<br /><br />.button {<br />background: buttonface; <br />border: 1px solid buttonface;<br />margin: 1; <br />}<br /><br />.raised { <br />border-top: 1px solid buttonhighlight;<br />border-left: 1px solid buttonhighlight;<br />border-bottom: 1px solid buttonshadow;<br />border-right: 1px solid buttonshadow;<br />background: buttonface;<br />margin: 1;<br />}<br /><br />.pressed {<br />border-top: 1px solid buttonshadow;<br />border-left: 1px solid buttonshadow;<br />border-bottom: 1px solid buttonhighlight;<br />border-right: 1px solid buttonhighlight;<br />background: buttonface;<br />margin: 1;<br />} <br /><br /><br />讀者可能已經(jīng)注意到，我們?cè)跇邮奖碇惺褂昧巳N系統(tǒng)顏色引用：buttonface、buttonshadow和buttonhighlight。通過(guò)將buttonface作為工具欄和按鈕的背景色，我們可以使用用戶得到與其他應(yīng)用軟件相同的界面外觀。用buttonshadow和buttonhighlight色創(chuàng)建邊界，通過(guò)編寫簡(jiǎn)單的JavaScript函數(shù)，就能使按鈕具有3D效果。當(dāng)然，如果想使該GUI更與網(wǎng)站而不是用戶的瀏覽器匹配，可以更換適當(dāng)?shù)念伾? <br /><br />能夠改變按鈕樣式的JavaScript下面的四個(gè)函數(shù)供事件處理程序在改變鼠標(biāo)事件圖像的類名時(shí)使用。盡管可以把JavaScript代碼編寫成嵌入式的，但我們把它們組織進(jìn)一個(gè)函數(shù)中，方便以后添加其他功能。 <br /><br />function mouseover(el) {<br />el.className = "raised";<br />}<br /><br />function mouseout(el) {<br />el.className = "button";<br />}<br /><br />function mousedown(el) {<br />el.className = "pressed";<br />}<br /><br />function mouseup(el) {<br />el.className = "raised";<br />} <br /><br /><br />與HTML進(jìn)行整合 <br /><br />現(xiàn)在剩下的工作就是將這些函數(shù)與包含工具欄、圖像、文本域的HTML代碼組合在一起： <br /><br /><br /><br /><br /><img class="button" <br />onmouseover="mouseover(this);" <br />onmouseout="mouseout(this);" <br />onmousedown="mousedown(this);" <br />onmouseup="mouseup(this);" <br />onclick="format_sel(´b´);" <br />src="bold.gif" <br />width="16" height="16" <br />align="middle" <br />alt="click to make your selection bold"><br /><img class="button" <br />onmouseover="mouseover(this);" <br />onmouseout="mouseout(this);" <br />onmousedown="mousedown(this);" <br />onmouseup="mouseup(this);" <br />onclick="format_sel(´i´);" <br />src="italic.gif" <br />width="16" height="16" <br />align="middle" <br />alt="click to make your selection italic"><br /><img class="button" <br />onmouseover="mouseover(this);" <br />onmouseout="mouseout(this);" <br />onmousedown="mousedown(this);" <br />onmouseup="mouseup(this);" <br />onclick="insert_link();" <br />src="link.gif" <br />width="32" height="16" <br />align="middle" <br />alt="click to add a link"><br /><br /><textarea cols="30" rows="6" name="my_textarea">



一個(gè)div中包含了三個(gè)按鈕的圖像，這樣會(huì)使代碼顯得簡(jiǎn)潔。函數(shù)調(diào)用在標(biāo)記的事件處理程序中，我們向格式化函數(shù)傳遞一個(gè)將被改變樣式的元素的引用，根據(jù)希望使用的格式（b表示粗體，i表示斜體），我們向format_sel()函數(shù)傳遞一個(gè)合適的參數(shù)。

結(jié)束語(yǔ)

當(dāng)然，這只是創(chuàng)建工具欄的一種方法，還有許多其他方法也可以創(chuàng)建工具欄。讀者創(chuàng)建的工具欄的功能也不必局限于本篇文章中涉及的功能，利用W3C DOM，可以很方便地改變一個(gè)文檔的樣式。

利用DOM操作，我們可以建立一個(gè)Word風(fēng)格的工具欄，讓用戶定制顯示卡的所有方面：改變字體的大小、文檔的字體、改變欄目的寬度。結(jié)合使用CSS、JavaScript和DOM，我們能夠創(chuàng)建與標(biāo)準(zhǔn)瀏覽器兼容的功能強(qiáng)大的應(yīng)用軟件GUI。[@more@]