|
挪用表示图
交互表示图
如上图所示，这根基是JQueryDialog的完备逻辑流程了。
1、用户点击模态窗口的“提交”按钮时，挪用JQueryDialog.Ok()函数，这个函数对应了用户提交变乱。
2、用OO的观念来说，JQueryDialog.Ok()着实是一个虚函数，它的逻辑封装在子窗口ContentWindow.Ok()中，这一点我小心了FCKEditor，如下代码所示：
JS代码
Copy to Clipboard 引用的内容：[www.veryhuo.com]
var JQueryDialog = {
/// <summary>提交</summary>
/// <remark></remark>
Ok:function(){
var frm = $("#jd_iframe");
if (frm[0].contentWindow.Ok()){
JqueryDialog.Close() ;
}
else{
frm[0].focus() ;
}
}
};
以是Iframe到Dialog的每个子页面必需界说函数Ok，以供父窗口挪用，并返回true或false来关照父窗口Dialog是否封锁。
3、 凡是在ContentWindow中会包括处事端的处理赏罚逻辑，这就必要通过POST与处事端交互，由于ContentWindow自己不包括"提交"按钮，以是假如要POST就必须在ContentWindow.Ok()中本身写submit()了。
4、最后，处事端逻辑执行完成，节制权需交回Dialog。于是我封装了JQueryDialog.SubmitCompleted()，个中包括三个参数供Dialog举办最后的逻辑处理赏罚：是否弹出动静以及动静内容，是否封锁Dialog，是否革新父窗口。这个函数也得益于FCKEditor，如下所示：
JS代码:
Copy to Clipboard引用的内容：[www.veryhuo.com]
var JQueryDialog = {
/// <summary>提交完成</summary>
/// <param name="alertMsg">弹出提醒内容，值为空不弹出</param>
/// <param name="isCloseDialog">是否封锁对话框</param>
/// <param name="isRefreshPage">是否革新页面(封锁对话框为true时有用)</param>
SubmitCompleted:function(alertMsg, isCloseDialog, isRefreshPage){
if($.trim(alertMsg).length > 0 ){
alert(alertMsg);
}
if(isCloseDialog){
JqueryDialog.Close();
if(isRefreshPage){
window.location.href = window.location.href;
}
}
}
};
5、功效相应，对用户泛起。
开拓日记
JS的模态窗口在网上一抓就 是一大把了，参考了一些，最终照旧抉择把这个也纳入本身浩瀚“原创工程”的个中之一，事实在WEB开拓中窗口照旧行使很是频仍的。从版本宣布日记也可以看 出，这个对象修修补补也有一段时刻了，根基此刻照旧一个初始的版本，但我会僵持不绝把它完美下去，进程中有机遇参考进修了JQuery、 Fckeditor等大型JS项目标框架，收益颇多；同时也再次领会了JS多赏识器兼容以及调试之苦，但又何妨？乐在个中。
谈谈项目标实现：起首基于浮动DIV。然后iframe子页面，行使iframe我想对付行使者和开拓者来说均是最为便捷的，模态窗口的内容就是子页面内 容，模态窗口的切换就是子页面的切换，传入差异子页面URL地点即打开差异内容的模态窗口。确认了框架布局最后就是一些处理赏罚细节了，好比子页面的变乱与模 态窗口封锁关联相关，这一点我从FCKEditor中得到庞大辅佐，参考了它的实现，各人可在DEMO中查察具体代码；为了多赏识器兼容封装了一些公用 DOM 要领；添加了一些自界说设置，好比边框颜色，配景颜色。同时思量到利便易用，所有行使CSS来实现结果，项目中未行使图片。
OK，正如前面所说，这是一个相对基本的版本，后头我会僵持不绝的完美，接待各人行使和提着名贵的提议。（吴剑，2009-06-01）
-------------------------------------------------------
最近做了一个项目，首要是基于客户端的，JQuery + JSON，写了近四千行JS代码。固然项目未结项就转交了出去，但开始对JQuery发生了好感并爱不释手，于是抉择将此项目正式改名为JQueryDialog。
本次更新将代码完全基于了JQuery框架，并应用了定名空间，让JS看起来有那么一点OO的感受，同时修改了客户端的ID，加上jd_前缀以停止斗嘴， 修改了拖拽的焦点函数，支持了多赏识器。最后在DEMO中添加了客户端与处事端的交互示例。接待各人下载行使。 （吴剑，2009-11-05）
-------------------------------------------------------
总认为拖拽不足顺畅，抉摘要彻底办理这个题目了，这些天查了不少资料，终于发明白题目地址：由于行使了iframe，当鼠标移动到iframe上 时，mousemove event lost，各人可试用下DEMO，修改后此刻的拖拽就完全顺畅了，而且索性我还疏散出了一个DragAndDrop类，专门来实现拖拽。不得不再次感激 FCKEditor的源代码，汲取了它的不少英华，前些天看消息，FCKEditor重构了代码，推出MAC气魄威风凛凛的CKEditor了，一向在研究 FCK，信托过段时刻会写一篇FCKEditor源代码说明的文章。
OK，2.0.1版本首要优化了焦点的拖拽，同时修复了Dialog location、Mouse style等bug，增进了自界说样式的设置项，优化了JQuery的缓存。（吴剑，2009-12-13）
-------------------------------------------------------
将JQuery进级为1.4 ，同时修复了变乱注册的两处BUG。（吴剑，2010-01-18）
-------------------------------------------------------
为Open要领增进了内部扩展，修复了IE6下部门表现BUG。(吴剑，2010-02-03)
作者：吴剑 博客： http://wu-jian.cnblogs.com/
DEMO下载：点击下载 （编辑：河北网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
