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 相关文章推荐
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
JavaScript中return用法示例
Nov 29 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
原生js实现获取form表单数据代码实例
Mar 27 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
php curl选项列表(超详细)
2013/07/01 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
举例讲解Python中装饰器的用法
2015/04/27 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
.NET面试10题
2014/02/24 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
太太口服液广告词
2014/03/20 职场文书
保护黄河倡议书
2014/05/16 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript