JQueryDialog(转)

效果图

调用示意图

交互示意图

如上图所示&＃xff0c;这基本是JQueryDialog的完整逻辑流程了。
1、用户点击模态窗口的“提交”按钮时&＃xff0c;调用JQueryDialog.Ok()函数&＃xff0c;这个函数对应了用户提交事件。

2、用OO的概念来说&＃xff0c;JQueryDialog.Ok()其实是一个虚函数&＃xff0c;它的逻辑封装在子窗口ContentWindow.Ok()中&＃xff0c;这一点我借鉴了FCKEditor&＃xff0c;如下代码所示&＃xff1a;

JS代码

var JQueryDialog &＃61; {
    /// 

提交

    /// 
    Ok:function(){
        var frm &＃61; $("#jd_iframe");    
        if (frm[0].contentWindow.Ok()){
            JqueryDialog.Close() ;
        }
        else{
            frm[0].focus() ;
        }
    }
};

所以Iframe到Dialog的每个子页面必须定义函数Ok&＃xff0c;以供父窗口调用&＃xff0c;并返回true或false来通知父窗口Dialog是否关闭。

3、 通常在ContentWindow中会包含服务端的处理逻辑&＃xff0c;这就需要通过POST与服务端交互&＃xff0c;因为ContentWindow本身不包含"提交"按钮&＃xff0c;所以如果要POST就必需在ContentWindow.Ok()中自己写submit()了。

4、最后&＃xff0c;服务端逻辑执行完成&＃xff0c;控制权需交回Dialog。于是我封装了JQueryDialog.SubmitCompleted()&＃xff0c;其中包含三个参数供Dialog进行最后的逻辑处理&＃xff1a;是否弹出消息以及消息内容&＃xff0c;是否关闭Dialog&＃xff0c;是否刷新父窗口。这个函数也得益于FCKEditor&＃xff0c;如下所示&＃xff1a;

JS代码

var JQueryDialog &＃61; {
    /// 

提交完成

    /// 弹出提示内容&＃xff0c;值为空不弹出
    /// 是否关闭对话框
    /// 是否刷新页面(关闭对话框为true时有效)
    SubmitCompleted:function(alertMsg, isCloseDialog, isRefreshPage){
        if($.trim(alertMsg).length > 0 ){
            alert(alertMsg);
        }
        if(isCloseDialog){
            JqueryDialog.Close();
            if(isRefreshPage){
                window.location.href &＃61; window.location.href;
            }
        }
    }
};

5、结果响应&＃xff0c;对用户呈现。

开发日志

JS的模态窗口在网上一抓就 是一大把了&＃xff0c;参考了一些&＃xff0c;最终还是决定把这个也纳入自己众多“原创工程”的其中之一&＃xff0c;毕竟在WEB开发中窗口还是使用非常频繁的。从版本发布日志也可以看 出&＃xff0c;这个东西修修补补也有一段时间了&＃xff0c;基本现在还是一个初始的版本&＃xff0c;但我会坚持不断把它完善下去&＃xff0c;过程中有机会参考学习了JQuery、 Fckeditor等大型JS项目的框架&＃xff0c;收益颇多&＃xff1b;同时也再次体会了JS多浏览器兼容以及调试之苦&＃xff0c;但又何妨&＃xff1f;乐在其中。

谈谈项目的实现&＃xff1a;首先基于浮动DIV。然后iframe子页面&＃xff0c;使用iframe我想对于使用者和开发者来说均是最为便捷的&＃xff0c;模态窗口的内容就是子页面内 容&＃xff0c;模态窗口的切换就是子页面的切换&＃xff0c;传入不同子页面URL地址即打开不同内容的模态窗口。确认了框架结构最后就是一些处理细节了&＃xff0c;比如子页面的事件与模 态窗口关闭关联关系&＃xff0c;这一点我从FCKEditor中获得巨大帮助&＃xff0c;参考了它的实现&＃xff0c;大家可在DEMO中查看详细代码&＃xff1b;为了多浏览器兼容封装了一些公用 DOM 方法&＃xff1b;添加了一些自定义配置&＃xff0c;比如边框颜色&＃xff0c;背景颜色。同时考虑到方便易用&＃xff0c;全部使用CSS来实现效果&＃xff0c;项目中未使用图片。

OK&＃xff0c;正如前面所说&＃xff0c;这是一个相对基础的版本&＃xff0c;后面我会坚持不断的完善&＃xff0c;欢迎大家使用和提出宝贵的建议。&＃xff08;吴剑&＃xff0c;2009-06-01&＃xff09;

--------------------------------------------------------

最近做了一个项目&＃xff0c;主要是基于客户端的&＃xff0c;JQuery &＃43; JSON&＃xff0c;写了近四千行JS代码。虽然项目未结项就转交了出去&＃xff0c;但开始对JQuery产生了好感并爱不释手&＃xff0c;于是决定将此项目正式更名为JQueryDialog。

本次更新将代码完全基于了JQuery框架&＃xff0c;并应用了命名空间&＃xff0c;让JS看起来有那么一点OO的感觉&＃xff0c;同时修改了客户端的ID&＃xff0c;加上jd_前缀以避免冲突&＃xff0c; 修改了拖拽的核心函数&＃xff0c;支持了多浏览器。最后在DEMO中添加了客户端与服务端的交互示例。欢迎大家下载使用。 &＃xff08;吴剑&＃xff0c;2009-11-05&＃xff09;

-------------------------------------------------------
总觉得拖拽不够顺畅&＃xff0c;决定要彻底解决这个问题了&＃xff0c;这些天查了不少资料&＃xff0c;终于发现了问题所在&＃xff1a;因为使用了iframe&＃xff0c;当鼠标移动到iframe上 时&＃xff0c;mousemove event lost&＃xff0c;大家可试用下DEMO&＃xff0c;修改后现在的拖拽就完全顺畅了&＃xff0c;并且索性我还分离出了一个DragAndDrop类&＃xff0c;专门来实现拖拽。不得不再次感谢 FCKEditor的源代码&＃xff0c;吸取了它的不少精华&＃xff0c;前些天看新闻&＃xff0c;FCKEditor重构了代码&＃xff0c;推出MAC风格的CKEditor了&＃xff0c;一直在研究 FCK&＃xff0c;相信过段时间会写一篇FCKEditor源代码分析的文章。

OK&＃xff0c;2.0.1版本主要优化了核心的拖拽&＃xff0c;同时修复了Dialog location、Mouse style等bug&＃xff0c;增加了自定义样式的配置项&＃xff0c;优化了JQuery的缓存。&＃xff08;吴剑&＃xff0c;2009-12-13&＃xff09;

-------------------------------------------------------

将JQuery升级为1.4 &＃xff0c;同时修复了事件注册的两处BUG。&＃xff08;吴剑&＃xff0c;2010-01-18&＃xff09;

-------------------------------------------------------

为Open方法增加了内部扩展&＃xff0c;修复了IE6下部分显示BUG。(吴剑&＃xff0c;2010-02-03)

版本发布

JS代码

/*****************************************************************************
[作者]
吴剑 http://wu-jian.cnblogs.com/

[版本更新]
2009-06-01&＃xff1a;版本1.0.1发布。
2009-07-05&＃xff1a;版本1.0.2&＃xff0c;更新了一些明显的BUG&＃xff0c;完全支持了IE系列浏览器。
2009-08-15&＃xff1a;版本1.0.3&＃xff0c;封装了标准DOM&＃xff0c;多浏览器下兼容&＃xff0c;样式美化&＃xff0c;添加了阴影效果。
2009-11-05&＃xff1a;版本2.0.0&＃xff0c;基于JQuery全新封装&＃xff0c;应用了JS的命名空间&＃xff0c;避免了客户端id冲突。
            项目正式更名为JQuery Dialog&＃xff0c;优化了拖拽的核心实现&＃xff0c;完全支持跨浏览器。
2009-12-14&＃xff1a;版本2.0.1&＃xff0c;优化了核心的拖拽算法&＃xff0c;分离出DragAndDrop类。
            修复了鼠标拖动过快Dialog停顿的BUG。
            修复了当Dialog宽或高大于页面时定位的BUG。
            修复了鼠标样式与拖拽控制区不精确的BUG。
            增加了配置项&＃xff0c;JQuery缓存优化。
2010-01-18&＃xff1a;版本2.0.2&＃xff0c;JQuery升级为1.4。
2010-02-03&＃xff1a;版本2.0.3&＃xff0c;为Open()方法增加了内部扩展&＃xff0c;修复IE6下部分显示BUG。
*****************************************************************************/

DEMO下载

点击下载