jquery網(wǎng)頁開發(fā)實(shí)例精解教學(xué)-第9章設(shè)計對話框

第9章設(shè)計對話框AJAX的出現(xiàn)給B/S結(jié)構(gòu)的應(yīng)用程序注入了新的活力，因?yàn)樗茉跓o刷新頁面的情況下就得到了新的數(shù)據(jù)內(nèi)容。富客戶端也就是RIA中比較常見的就是頁面對話框。本章主要講解通過jQuery實(shí)現(xiàn)對話框的設(shè)計原理及主要對話框插件的使用。9.1設(shè)計基本對話框本節(jié)主要講解對話框的基本實(shí)現(xiàn)過程。對話框的實(shí)現(xiàn)其原理主要是彈出層操作，當(dāng)需要觸發(fā)對話框時將隱藏的層顯示出來。下面來看一下最基本的對話框?qū)崿F(xiàn)。其中，要使用到的jQuery函數(shù)ready()、click()、css()、show()、hide()。其功能實(shí)現(xiàn)如下：（1）為頁面中觸發(fā)彈出對話框的元素添加單擊事件，在事件中觸發(fā)對話框所在層顯示，并定位對話框的具體顯示位置。（2）為對話框添加觸發(fā)隱藏的單擊事件。首先，利用HTML創(chuàng)建靜態(tài)頁面，CSS樣式設(shè)定部分請參考光盤內(nèi)容。然后，加入jQuery庫文件：<scripttype="text/javascript"src="jslib/jquery.js"></script>最后，加入Javascript代碼。效果如圖所示。9.2模式對話框模式對話框的實(shí)現(xiàn)原理是：在觸發(fā)對話框的同時創(chuàng)建一個所謂遮蓋層。遮蓋層覆蓋在頁面的所有內(nèi)容之上，除了對話框，但是遮蓋層需要設(shè)定一定的透明度。其中，要使用的jQuery函數(shù)ready()、click()、css()、show()、hide()。其功能實(shí)現(xiàn)如下：（1）為頁面中觸發(fā)彈出對話框的元素，添加單擊事件，在事件中觸發(fā)對話框所在層顯示，并定位對話框的具體顯示位置。（2）在觸發(fā)對話框事件中顯示遮蓋層。（3）為對話框添加觸發(fā)隱藏的單擊事件，同時隱藏遮蓋層。首先，在上節(jié)例子的基礎(chǔ)上添加遮蓋層：<divid="background"></div>然后修改Javascript功能代碼。效果如圖所示。9.3輸入對話框前面在介紹Javascript的時候，曾介紹過它的三個基本對話框alert()、confirm()、prompt()。它們分別表示提示對話框、確認(rèn)對話框、輸入對話框。從本節(jié)開始介紹如何通過jQuery來模擬創(chuàng)建這三個對話框。本節(jié)創(chuàng)建輸入對話框，其實(shí)現(xiàn)原理是：利用彈出層，在層上添加用戶輸入功能，并在層隱藏后將用戶輸入內(nèi)容顯示在頁面上。其中，使用到的jQuery函數(shù)ready()、click()、css()、show()、hide()、text()、val()。其功能實(shí)現(xiàn)如下：（1）為頁面中觸發(fā)彈出對話框的元素添加單擊事件，在事件中觸發(fā)對話框所在層顯示，并定位對話框的具體顯示位置。（2）在觸發(fā)對話框事件中顯示遮蓋層。（3）為對話框添加觸發(fā)隱藏的單擊事件，同時隱藏遮蓋層。（4）為對話框的內(nèi)容提交按鈕，添加隱藏對話框和遮蓋層功能，并將用戶輸入的內(nèi)容在頁面中顯示。首先，將上一節(jié)的對話框中的樣式進(jìn)行修改，然后修改Javascript功能代碼：效果如圖1和2所示。圖1圖2

9.4提示對話框這一節(jié)來看一下提示對話框，提示對話框主要是提示信息的顯示。它的基本工作原理和第二節(jié)所介紹的模式對話框類似，當(dāng)用戶輸入相應(yīng)內(nèi)容并觸發(fā)對話框彈出時，自動將用戶的內(nèi)容攜帶進(jìn)對話框。其中，要使用到的jQuery函數(shù)ready()、click()、css()、show()、hide()、attr()。其功能實(shí)現(xiàn)如下：（1）為頁面中觸發(fā)彈出對話框的元素添加單擊事件，在事件中觸發(fā)對話框所在層顯示，并定位對話框的具體顯示位置，將用戶輸入內(nèi)容填入對話框。（2）在觸發(fā)對話框事件中顯示遮蓋層。（3）為對話框添加觸發(fā)隱藏的單擊事件，同時隱藏遮蓋層。首先，將上一節(jié)的對話框中的樣式進(jìn)行修改。然后修改Javascript功能代碼。效果如圖1和2所示。圖1圖2

9.5確認(rèn)對話框確認(rèn)對話框?yàn)橛脩籼峁﹥煞N選擇結(jié)果，并且用戶的選擇會直接影響到頁面上的操作。它的實(shí)現(xiàn)原理是：從頁面提取用戶操作內(nèi)容在對話框顯示時，提示用戶是否確認(rèn)自己操作。當(dāng)用戶對對話框作出確認(rèn)或者否定操作時，又返回來直接修改頁面內(nèi)容。其中，使用到的jQuery函數(shù)ready()、click()、css()、show()、hide()、attr()。其功能實(shí)現(xiàn)如下：（1）為頁面中觸發(fā)彈出對話框的元素添加單擊事件，在事件中觸發(fā)對話框所在層顯示，并定位對話框的具體顯示位置，將用戶輸入內(nèi)容填入對話框。（2）在觸發(fā)對話框事件中顯示遮蓋層。（3）為對話框的確認(rèn)按鈕添加觸發(fā)隱藏的單擊事件，同時隱藏遮蓋層。（4）為對話框的取消添加觸發(fā)隱藏的單擊事件，同時隱藏遮蓋層。當(dāng)用戶勾選了頁面內(nèi)容，則取消勾選操作。首先，將上一節(jié)的對話框中的樣式進(jìn)行修改。然后修改Javascript功能代碼。效果如圖所示。9.6對話框插件對話框插件是一種在網(wǎng)頁頁面上模擬跳出模式或者非模式對話框的插件。它可以幫助我們完成更多的用戶交互操作，并節(jié)省我們開發(fā)自定義對話框的時間。本節(jié)介紹兩個對話框插件。它們的基本功能和前面幾節(jié)介紹的自定義對話框類似。9.6.1jqModal對話框插件這個jQuery插件幫助我們在瀏覽器中顯示告示、對話框、模式窗口。它富有彈性，小巧就如同“瑞士軍刀”一樣。它的英文介紹網(wǎng)址。jqModal特點(diǎn)：（1）設(shè)計友好，不用復(fù)雜的操作。（2）翻譯友好，不用硬編碼英文字符串。（3）開發(fā)友好，利用回調(diào)函數(shù)實(shí)現(xiàn)多功能。（4）支持遠(yuǎn)程家在內(nèi)容。（5）多模塊支持。jqModal基本使用步驟：（1）添加對話框容器。（2）初始化對話框。（3）觸發(fā)對話框。jqModal中使用的函數(shù)如表所示。jqModal中使用到的參數(shù)說明如表所示。下面通過幾個例子來了解這個插件的使用方法，這里不涉及到Ajax內(nèi)容。1.默認(rèn)對話框形式這種對話框的使用是完全套用了所有屬性為默認(rèn)值的情況。首先，需要建立靜態(tài)頁面。效果如圖所示。2．可拖動的帶特殊背景的模式對話框這種對話框使用了jqModal的一部分屬性，并加入了對話框的拖動功能。效果如圖1和2所示。圖1圖23.jqModal的顯示與隱藏這個例子使用了插件的顯示與隱藏方法控制彈出對話框?qū)?，同時使用了添加觸發(fā)對話框的元素和關(guān)閉對話框元素方法。靜態(tài)頁面和CSS代碼請參考光盤內(nèi)容。主要討論一下Javascript的功能代碼。效果如圖1和2所示。圖1圖29.6.2jQuery.UI.Dialog對話框插件這個插件是jQuery官方網(wǎng)站提供的一整套UI插件中的一部分。它的主要功能是提供利用jQuery生成動態(tài)浮動對話框。這個插件需要以下jQuery文件的支持：jquery.ui.core.js、jquery.ui.widget.js、jquery.ui.position.js、jquery.ui.mouse.js（可選，當(dāng)需要通過鼠標(biāo)拖動對話框或者改變對話框的大小時使用）、jquery.ui.draggable.js（可選）、jquery.ui.resizable.js。這個插件有一些相關(guān)屬性，可以設(shè)置對話框的樣式和行為，參考表所示。與這個對話框相關(guān)的還有事件選項(xiàng)，參考表所示。對話框有一些行為可以控制對話框的相關(guān)操作，參考表所示。下面用例子來介紹一下這個插件的使用。1.默認(rèn)對話框這個例子使用Dialog的默認(rèn)參數(shù)形式，只調(diào)用了Dialog插件的初始化函數(shù)。其中，HTML代碼和CSS代碼請參考光盤內(nèi)容。效果如圖所示。2.動畫效果對話框這個例子使用了關(guān)于Dialog打開與關(guān)閉的屬性設(shè)置和相關(guān)方法調(diào)用，實(shí)現(xiàn)Dialog動畫效果打開和關(guān)閉。其中，HTML代碼和CSS代碼請參考光盤內(nèi)容。具體效果如圖1和2所示。圖1圖23.模式對話框前面兩個例子所看到的對話框都是非模式對話框，也就是當(dāng)對話框出現(xiàn)時，對話框后面頁面上的內(nèi)容還是可以操作的。這里我們介紹通過Dialog創(chuàng)建模式對話框。其中，HTML代碼和CSS代碼請參考光盤內(nèi)容。效果如圖所示。4.模式確認(rèn)對話框這個對話框是將原有對話框功能取消掉，利用Dialog屬性重新創(chuàng)建對話框功能，以其實(shí)現(xiàn)確認(rèn)對話框。其中，HTML代碼和CSS代碼請參考光盤內(nèi)容。效果如圖所示。5.模式表單對話框這個對話框是將原有對話框功能取消掉，利用Dialog屬性重新創(chuàng)建對話框功能，以其實(shí)現(xiàn)用戶輸入表單對話框。其中，HTML代碼和CSS代碼請參考光盤內(nèi)容。效果如圖1、2和3所示。圖1圖2

圖36.模式消息對話框這個對話框是將原有對話框功能取消掉，利用Dialog屬性重新創(chuàng)建對話框功能，并在對話框中顯示一定的消息內(nèi)容。其中，HTML代碼和CSS代碼請參考光盤內(nèi)容。效果如圖所示。9.7小結(jié)本章對jQuery創(chuàng)建網(wǎng)頁對話框進(jìn)行了講解。主要內(nèi)容包括基本對話