效果圖

 

 

調(diào)用示意圖

 

交互示意圖

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

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

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

JS代碼


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



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

最新評論