Asp. net+Jquery 實(shí)現(xiàn)動態(tài)信息窗口

謝 忠

( 九江學(xué)院實(shí)驗(yàn)中心 江西九江 332005)

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

1 窗口應(yīng)用的分類

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

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

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

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

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

2 窗口設(shè)計(jì)方法

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

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

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

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

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

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

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

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

3.2 對話框信息窗口控制

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

4 結(jié)束語

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

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