謝 忠

( 九江學院實驗中心 江西九江 332005)

在網(wǎng)頁設(shè)計中，彈出窗口有著非常廣泛的應用，可以對一些非常重要的信息起到警告或者提示的作用。這個主要來自在Java 腳本語言中的窗口對象，可以通過其Open 方法可以很方便的實現(xiàn)彈出窗口，Java 腳本語言能夠在瀏覽器可以直接解釋執(zhí)行，應用范圍日益廣泛，影響日越增大，因此受到人們廣泛關(guān)注。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，彈出窗口的應用不僅僅只是為了廣告、提示而用，開始進行許多的信息瀏覽等，而不再以跳換新頁面來進行相關(guān)處理，直接在本頁彈出窗口進行相關(guān)操作。2006年1月由美國人John Resig 在紐約發(fā)布了Jquery 技術(shù)，其是一個兼容多瀏覽器的Javascript 庫，其核心理念是write less，do more(寫的更少，做的更多)。其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強大的靜態(tài)或動態(tài)網(wǎng)頁。Jquery Ui 是以Jquery 為基礎(chǔ)的開源Javascript 網(wǎng)頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件。Jquery Ui利用Jquery的擴展性，而設(shè)計的插件。提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等。Asp. net 是基于通用語言的編譯運行的程序，具有強大性和適應性。其通用語言的基本庫、消息機制和數(shù)據(jù)接口的處理都能無縫的整合到Asp. net的Web 應用中。本文中將使用Asp. net 利用Jquery Ui 對話框插件庫，來實現(xiàn)動態(tài)信息窗口。

1 窗口應用的分類

網(wǎng)頁中設(shè)計中的彈出窗口，根據(jù)其使用可歸納為如下幾種［1］:

(1)提示性彈出窗口。此類彈出窗口主要作用一是起著提示、公告作用，提示網(wǎng)站系統(tǒng)中有些重要的事情將要發(fā)生或者已經(jīng)發(fā)生的信息，用來表示一些重要通知的發(fā)布或者對網(wǎng)頁用戶的友好問候;二是當進行數(shù)據(jù)信息輸入發(fā)生錯誤或非法操作等的警告。例如最為常見簡單的使用Alret命令來建立這樣的彈出窗口，只要直接點擊其中的確定按鈕或者頁面右上角的關(guān)閉按鈕，就可以將其關(guān)閉。

(2)選擇性彈出窗口。對于這類窗口，主要在信息瀏覽、查詢的時候彈出窗口，或是進行某個操作彈出窗口。在這種類型的彈出窗口中，一般情況下至少要有兩個按鈕，選擇不同的按鈕 可以讓網(wǎng)站轉(zhuǎn)向不同的頁面，用戶在選擇的時候可以根據(jù)自身的需求來進行，在具體的使用過程中，一般是在Java 腳本語言中進行調(diào)用的。

(3)自動彈出性窗口。這種彈出窗口在網(wǎng)頁設(shè)計中最經(jīng)常使用就是彈出的廣告、網(wǎng)站宣傳或咨詢電話幫助等，其作用就是當用戶打開某一瀏覽器的窗口時，同時一個或多個窗口也會隨之自動打開，用來顯示與網(wǎng)站相關(guān)的內(nèi)容或者作為廣告宣傳的工具。在具體的使用過程中，可以在Javascript 腳本語言中使用Window. open 命令來實現(xiàn)。鑒于篇幅，這里不再編寫代碼舉例說明。

上述幾類窗口，在網(wǎng)站設(shè)計應用時，幾乎都是采用Javascript 腳本語言來進行設(shè)計實現(xiàn)。而且編寫此類代碼煩瑣，費心也費力，其在跨越不同瀏覽器還要做相應的更改，其跨越能力差，而Jquery 技術(shù)解決了此類問題，并更具有擴展能力。

2 窗口設(shè)計方法

彈出窗口在網(wǎng)頁中的設(shè)計決定于所包含的內(nèi)容。用戶最關(guān)心的就是自己要查詢的信息，與此相關(guān)的一些重要通知或者系統(tǒng)信息，這樣才能對用戶產(chǎn)生良好的引導作用，然而以往使用Alret 或Window. open 命令進行設(shè)計彈出信息窗口，其美觀性就顯得有些呆板，在實際頁面?zhèn)€性化中顯得有些不協(xié)調(diào)，這就必須結(jié)合相關(guān)CSS 來進行美化，而Jquery Ui 卻免費提供了一種極為炫的彈出對話框窗口Dialog，具體設(shè)計方法是:設(shè)計Div 層后，通過CSS 進行層樣式設(shè)計和Javascrpt 編寫的代碼進行層的屬性和事件的控制。

Jquery Ui 1.9.2 是目前Jquery 最新的Ui 包庫，可以在Jquery 官方網(wǎng)站直接免費下載，在其包中的Demos 中就提供了彈出對話框窗口dialog的范例，Jquery. Ui. Dialog. CSS 進行對 話 框窗口的 樣式設(shè)計，Jquery. Ui. Dialog. Js 進行對話框窗口的相關(guān)控制(窗口的大小，位置，彈出的延時，關(guān)閉等)，可惜它只是個靜態(tài)方式的信息對話框窗口，而在實際運用中，需要進行動態(tài)生成和動態(tài)彈出，為此通過對其范例的分析，進行了實際動態(tài)生成應用。

3 動態(tài)窗口設(shè)計與實現(xiàn)

筆者將Jquery Ui 在“九江學院設(shè)備維護維修WEB 管理系統(tǒng)”中給予設(shè)計與實現(xiàn)，具體在ASP. NET 下實現(xiàn)通過，實際效果圖如圖1 所示。

圖1 動態(tài)dialog 窗口

3.1 動態(tài)層設(shè)計

在實際設(shè)計中，以圖2 為例［2-5］，首先設(shè)計出動態(tài)層，然后進行相關(guān)彈出控制。在示例中c_con 標簽作為動態(tài)層的一個變量，將通過代碼來動態(tài)生成若干個層，c_ title 標簽作為信息標題變量，也將通過代碼來生成。

圖2 動態(tài)層設(shè)計示例

3.2 對話框信息窗口控制

動態(tài)對話框信息窗口層設(shè)計好以后，還必須通過Jquery 進行控制，由于Jquery 具有對網(wǎng)頁中Dom 元素進行選擇、遍歷、修改和事件處理等功能，所以再通過對動態(tài)生成的對話框信息窗口進行控制處理，只有當要查看某條信息時，再彈出顯示相應的信息窗口(見圖1)，具體代碼如下。

4 結(jié)束語

Jquery 是一個快速、簡單的Javascript 庫，它簡化了Html 文件的跨越各類瀏覽器平臺能力，具有事件處理、動畫、Ajax 互動功能，從而方便了網(wǎng)頁制作的快速發(fā)展。通過Jquery 擴展功能，可以在網(wǎng)頁設(shè)計中得到意想不到的效果，本文所使用的只是其中一個范例，給予一點借鑒。從實際應用可以看到Jquery 給用戶帶來的快捷、省心又省力地完成各種應用，而無需自己編寫大量的Javascript 腳本。

［1］鄧波濤. 網(wǎng)頁設(shè)計中彈出窗口的巧妙應用［J］. 計算機光盤軟件與應用，2011，4 (2) : 7.