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 相关文章推荐
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 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 强制下载文件代码
2010/10/24 PHP
提高PHP编程效率的方法
2013/11/07 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
php array_map()函数实例用法
2021/03/03 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
开源Web应用框架Django图文教程
2017/03/09 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python实现图片添加文字
2019/11/26 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
音乐器材管理制度
2014/01/31 职场文书
职工趣味运动会方案
2014/02/10 职场文书
财务简历的自我评价
2014/03/05 职场文书
会计专业求职信范文
2014/03/16 职场文书
抽奖活动主持词
2014/03/31 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
公司转让协议书
2016/03/19 职场文书
django中websocket的具体使用
2022/01/22 Python