JQuery Dialog(JS 模态窗口,可拖拽的DIV)


Posted in Javascript onFebruary 07, 2010

效果图

JQuery Dialog(JS 模态窗口,可拖拽的DIV) 

 

调用示意图

JQuery Dialog(JS 模态窗口,可拖拽的DIV) 

交互示意图

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

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

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代码

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)

版本发布

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

Javascript 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
使用JS实现简易计算器
Jun 14 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 #Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 #Javascript
jquery 应用代码 方便的排序功能
Feb 06 #Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 #Javascript
javascript小数计算出现近似值的解决办法
Feb 06 #Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 #Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 #Javascript
You might like
php密码生成类实例
2014/09/24 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
newxtree.js代码
2007/03/13 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
企业文化标语大全
2014/06/10 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
详解Python生成器和基于生成器的协程
2021/06/03 Python
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android