效果圖

 

 

調(diào)用示意圖

 

交互示意圖

如上圖所示，這基本是JQueryDialog的完整邏輯流程了。
1、用戶點(diǎn)擊模態(tài)窗口的“提交”按鈕時(shí)，調(diào)用JQueryDialog.Ok()函數(shù)，這個(gè)函數(shù)對(duì)應(yīng)了用戶提交事件。

2、用OO的概念來(lái)說(shuō)，JQueryDialog.Ok()其實(shí)是一個(gè)虛函數(shù)，它的邏輯封裝在子窗口ContentWindow.Ok()中，這一點(diǎn)我借鑒了FCKEditor，如下代碼所示：
JS代碼

所以Iframe到Dialog的每個(gè)子頁(yè)面必須定義函數(shù)Ok，以供父窗口調(diào)用，并返回true或false來(lái)通知父窗口Dialog是否關(guān)閉。
3、 通常在ContentWindow中會(huì)包含服務(wù)端的處理邏輯，這就需要通過(guò)POST與服務(wù)端交互，因?yàn)镃ontentWindow本身不包含"提交"按鈕，所以如果要POST就必需在ContentWindow.Ok()中自己寫(xiě)submit()了。
4、最后，服務(wù)端邏輯執(zhí)行完成，控制權(quán)需交回Dialog。于是我封裝了JQueryDialog.SubmitCompleted()，其中包含三個(gè)參數(shù)供Dialog進(jìn)行最后的邏輯處理：是否彈出消息以及消息內(nèi)容，是否關(guān)閉Dialog，是否刷新父窗口。這個(gè)函數(shù)也得益于FCKEditor，如下所示：

JS代碼


5、結(jié)果響應(yīng)，對(duì)用戶呈現(xiàn)。



開(kāi)發(fā)日志
JS的模態(tài)窗口在網(wǎng)上一抓就 是一大把了，參考了一些，最終還是決定把這個(gè)也納入自己眾多“原創(chuàng)工程”的其中之一，畢竟在WEB開(kāi)發(fā)中窗口還是使用非常頻繁的。從版本發(fā)布日志也可以看 出，這個(gè)東西修修補(bǔ)補(bǔ)也有一段時(shí)間了，基本現(xiàn)在還是一個(gè)初始的版本，但我會(huì)堅(jiān)持不斷把它完善下去，過(guò)程中有機(jī)會(huì)參考學(xué)習(xí)了JQuery、 Fckeditor等大型JS項(xiàng)目的框架，收益頗多；同時(shí)也再次體會(huì)了JS多瀏覽器兼容以及調(diào)試之苦，但又何妨？樂(lè)在其中。
談?wù)勴?xiàng)目的實(shí)現(xiàn)：首先基于浮動(dòng)DIV。然后iframe子頁(yè)面，使用iframe我想對(duì)于使用者和開(kāi)發(fā)者來(lái)說(shuō)均是最為便捷的，模態(tài)窗口的內(nèi)容就是子頁(yè)面內(nèi) 容，模態(tài)窗口的切換就是子頁(yè)面的切換，傳入不同子頁(yè)面URL地址即打開(kāi)不同內(nèi)容的模態(tài)窗口。確認(rèn)了框架結(jié)構(gòu)最后就是一些處理細(xì)節(jié)了，比如子頁(yè)面的事件與模 態(tài)窗口關(guān)閉關(guān)聯(lián)關(guān)系，這一點(diǎn)我從FCKEditor中獲得巨大幫助，參考了它的實(shí)現(xiàn)，大家可在DEMO中查看詳細(xì)代碼；為了多瀏覽器兼容封裝了一些公用 DOM 方法；添加了一些自定義配置，比如邊框顏色，背景顏色。同時(shí)考慮到方便易用，全部使用CSS來(lái)實(shí)現(xiàn)效果，項(xiàng)目中未使用圖片。
OK，正如前面所說(shuō)，這是一個(gè)相對(duì)基礎(chǔ)的版本，后面我會(huì)堅(jiān)持不斷的完善，歡迎大家使用和提出寶貴的建議。（吳劍，2009-06-01）
--------------------------------------------------------
最近做了一個(gè)項(xiàng)目，主要是基于客戶端的，JQuery + JSON，寫(xiě)了近四千行JS代碼。雖然項(xiàng)目未結(jié)項(xiàng)就轉(zhuǎn)交了出去，但開(kāi)始對(duì)JQuery產(chǎn)生了好感并愛(ài)不釋手，于是決定將此項(xiàng)目正式更名為JQueryDialog。
本次更新將代碼完全基于了JQuery框架，并應(yīng)用了命名空間，讓JS看起來(lái)有那么一點(diǎn)OO的感覺(jué)，同時(shí)修改了客戶端的ID，加上jd_前綴以避免沖突， 修改了拖拽的核心函數(shù)，支持了多瀏覽器。最后在DEMO中添加了客戶端與服務(wù)端的交互示例。歡迎大家下載使用。 （吳劍，2009-11-05）
-------------------------------------------------------
總覺(jué)得拖拽不夠順暢，決定要徹底解決這個(gè)問(wèn)題了，這些天查了不少資料，終于發(fā)現(xiàn)了問(wèn)題所在：因?yàn)槭褂昧薸frame，當(dāng)鼠標(biāo)移動(dòng)到iframe上 時(shí)，mousemove event lost，大家可試用下DEMO，修改后現(xiàn)在的拖拽就完全順暢了，并且索性我還分離出了一個(gè)DragAndDrop類，專門(mén)來(lái)實(shí)現(xiàn)拖拽。不得不再次感謝 FCKEditor的源代碼，吸取了它的不少精華，前些天看新聞，F(xiàn)CKEditor重構(gòu)了代碼，推出MAC風(fēng)格的CKEditor了，一直在研究 FCK，相信過(guò)段時(shí)間會(huì)寫(xiě)一篇FCKEditor源代碼分析的文章。
OK，2.0.1版本主要優(yōu)化了核心的拖拽，同時(shí)修復(fù)了Dialog location、Mouse style等bug，增加了自定義樣式的配置項(xiàng)，優(yōu)化了JQuery的緩存。（吳劍，2009-12-13）
-------------------------------------------------------
將JQuery升級(jí)為1.4 ，同時(shí)修復(fù)了事件注冊(cè)的兩處BUG。（吳劍，2010-01-18）
-------------------------------------------------------
為Open方法增加了內(nèi)部擴(kuò)展，修復(fù)了IE6下部分顯示BUG。(吳劍，2010-02-03)

版本發(fā)布

JS代碼
/*****************************************************************************
[作者]
吳劍 http://wu-jian.cnblogs.com/
[版本更新]
2009-06-01：版本1.0.1發(fā)布。
2009-07-05：版本1.0.2，更新了一些明顯的BUG，完全支持了IE系列瀏覽器。
2009-08-15：版本1.0.3，封裝了標(biāo)準(zhǔn)DOM，多瀏覽器下兼容，樣式美化，添加了陰影效果。
2009-11-05：版本2.0.0，基于JQuery全新封裝，應(yīng)用了JS的命名空間，避免了客戶端id沖突。
項(xiàng)目正式更名為JQuery Dialog，優(yōu)化了拖拽的核心實(shí)現(xiàn)，完全支持跨瀏覽器。
2009-12-14：版本2.0.1，優(yōu)化了核心的拖拽算法，分離出DragAndDrop類。
修復(fù)了鼠標(biāo)拖動(dòng)過(guò)快Dialog停頓的BUG。
修復(fù)了當(dāng)Dialog寬或高大于頁(yè)面時(shí)定位的BUG。
修復(fù)了鼠標(biāo)樣式與拖拽控制區(qū)不精確的BUG。
增加了配置項(xiàng)，JQuery緩存優(yōu)化。
2010-01-18：版本2.0.2，JQuery升級(jí)為1.4。
2010-02-03：版本2.0.3，為Open()方法增加了內(nèi)部擴(kuò)展，修復(fù)IE6下部分顯示BUG。
*****************************************************************************/
DEMO http://demo.jb51.net/js/jquery_dialog/default.html
點(diǎn)擊下載

最新評(píng)論