利用JavaScript創建功能強大的GUI(轉)

發布時間：2020-08-13 16:34:55 來源：ITPUB博客閱讀：430 作者：rainytag 欄目：編程語言

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

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

或許你還不知道JavaScript還有這樣的功能，或曾經在其他網站上看到過工具欄，但不知道它是如何完成的。在本篇文章中，我們將討論如何建立一個簡單的、格式化工具欄（就象Word中的那樣），該工具欄可以為任意的網站添加讓用戶通過

區進行反饋的功能。本篇文章介紹的技巧需要讀者具備有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標記的字符串。在這個工具欄中，我們用這個函數來控制和之間的文本。當然，如果愿意，我們可以使用和替換和，或者使用這個函數控制一段選定的文本，或者在選擇的標記中限定指定文本。 
 我們可以使用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 = "" + str + ""; } 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代碼組合在一起： 
 <img class="button" onmouseover="mouseover(this);" 
 onmouseout="mouseout(this);" onmousedown="mousedown(this);" 
 onmouseup="mouseup(this);" onclick="format_sel(´b´);" src="bold.gif" 
 width="16" height="16" align="middle" alt="click to make your 
selection bold"> <img class="button" onmouseover="mouseover(this);" 
 onmouseout="mouseout(this);" onmousedown="mousedown(this);" 
 onmouseup="mouseup(this);" onclick="format_sel(´i´);" 
 src="italic.gif" width="16" height="16" align="middle" 
 alt="click to make your selection italic"> <img class="button" 
 onmouseover="mouseover(this);" onmouseout="mouseout(this);" 
 onmousedown="mousedown(this);" onmouseup="mouseup(this);" 
 onclick="insert_link();" src="link.gif" width="32" height="16" 
 align="middle" alt="click to add a link"> <textarea 
cols="30" rows="6" 
name="my_textarea">

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

結束語

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

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

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

利用JavaScript創建功能強大的GUI(轉)

猜你喜歡

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

利用JavaScript創建功能強大的GUI(轉)

猜你喜歡

最新資訊

相關推薦

相關標簽