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

吴剑 2012-08-08

原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/

效果图

调用示意图

交互示意图

如上图所示,这基本是JQueryDialog的完整逻辑流程了。

0、通过JqueryDialog.Open()函数打开一个模态窗口。模态窗口的内容实际是一个独立的页面,它嵌入到iframe中。

1、用户点击模态窗口的“提交”按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件。

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

var JQueryDialog ={/// <summary>提交</summary>/// <remark></remark>Ok:function(){var frm = $("#jd_iframe");    frm[0].contentWindow.Ok();frm[0].focus();}};

所以Iframe到Dialog的每个子页面必须定义函数Ok,以供父窗口调用。

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">是否刷新页面</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)

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

有很长时间没更新了,感谢回帖反馈BUG的朋友。

升级了JQuery版本,解决了嵌入页面控件无法获取焦点的BUG,

解决了IE下调用Close方法导致其它脚本错误的BUG。(吴剑,2012-08-08)

版本发布

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。

2012-08-08:版本2.0.5,解决嵌入页面控件无法获取焦点的BUG,解决Close方法脚本错误BUG。
****************************************************************************
*/

DEMO下载

点击下载

<全文完>

转载于:https://www.cnblogs.com/wu-jian/archive/2010/02/03/1662751.html

JQuery Dialog(JS模态窗口,可拖拽的DIV)相关推荐

  1. js实现弹出窗口的拖拽功能

    弹出窗口的拖拽 拖拽功能运用到的有 onmousedown 事件,onmousemove 事件以及 onmouseup 事件 弹出窗口基本步骤: 1.点击点击弹出窗口按钮弹出窗口: 2.窗口弹出后,鼠 ...

  2. html拖拽模态框,bootstrap模态框实现拖拽效果

    本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下 项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞 ...

  3. html5 div拖拽插件,div拖拽插件——JQ.MoveBox.js(自制JQ插件)

    有一段时间没更新博客了,都不知道忙些什么,学习也没什么进展,惭愧. 这一周空闲的时间学着自己写一下JQ插件. 以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ ...

  4. java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能

    一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...

  5. js实现可拖拽的div

    实现一个div可以被拖拽,代码如下所示: <!DOCTYPE html> <html lang="en"> <head><meta cha ...

  6. MFC中窗口实现拖拽文件功能

    MFC窗口拖拽文件功能指的是用鼠标将文件拖拽入窗口后,在窗口中可以获取拖拽文件的绝对路径,如图1所示. 图1 文件拖拽功能 实现窗口的拖拽文件功能,首先要将窗口注册为放置拖拽文件的目标,之后在窗口中响 ...

  7. js 鼠标拖拽改变div宽度高度

    js 鼠标拖拽改变div宽度高度, <!DOCTYPE html> <html><head><meta charset="UTF-8" / ...

  8. mousedown、mousemove、mouseup实现一个可拖拽的div

    可拖拽的div 前言:前端开发当中不单单是简单的页面布局,很多的事件也应用在其中,比如一个窗口实现在整个页面的拖动的需求. 明确步骤 (1)对div设置position:absolute:属性并设置t ...

  9. 鼠标拖拽调整div大小

    鼠标拖拽调整div大小 实现思路 根据鼠标位置改变鼠标样式 当鼠标在div的边缘和四个角时显示不同的样式,通过cursor修改 当鼠标在div的边缘和四个角按下时记录具体坐标点位置, 并开始根据鼠标的 ...

最新文章

  1. 德国人工智能研究中心波尔特:人工智能与工业4.0并驾齐驱
  2. 【图文详解】Mysql8.0安装教程
  3. iphone版 天行skyline_SkyLine
  4. spark 数据框 删除列_pandas 常用的数据处理函数
  5. OpenJudge NOI 1.7 34:回文子串
  6. Android 中activity中传递数据的方式
  7. 微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法
  8. 当你学会这项python数据提取神器时,请做好升职准备!
  9. RSA 2019|远禾科技携YScanner荣获国际权威杂志认可
  10. php常见问题辨析(二)
  11. OpenCV : 图像数字化
  12. 三类IP地址ABC类的划分
  13. Python调用图灵机器人
  14. java wav 转 mp3_java,wavToMP3格式转换
  15. ​独家 | 为什么程序员不应该长期留在一家公司?
  16. 大学计算机基础实训13,东南大学《大学计算机基础》实验13EXCEL图表制作.pdf
  17. 汽车暖风系统操作步骤
  18. 上网被阻断未经pppoe认证_锐捷上网认证常见问题及解决办法
  19. 给出n个数,找出这n个数的最大,最小,和值
  20. Cortex-M3处理器

热门文章

  1. SQLServer出现不允许保存更改的问题解决
  2. 流(stream)是怎么一回事
  3. MySQL安装编译时,/bin/rm: cannot remove `libtoolT': No such file or directory
  4. 修改yum源的资源路径baseurl
  5. 2012.4.10 全球IPv6暨下一代互联网高峰会议 日程表
  6. Live Meeting 音频视频使用端口设置
  7. 世上可有后悔药?服务器里建快照
  8. 小米8ios图标包下载_小米手机中这么实用的隐藏功能,知道的人居然那么少?真可惜...
  9. 测试鼠标是否双击_鼠标连接电脑没反应
  10. 翁恺老师C语言学习笔记(十)指针_指针变量就是记录地址的变量