使用panel的onMove事件攻克了panel,dialog以及window组件在被拖动时,会超出浏览器边界而无法拖回的情况。

当窗体被拖出浏览器有边界时。$(document).width();会增大,增大的部分就是窗体超过浏览器窗体的部分,所以right > browserWidth条件永远无法满足。

假设我们在思考得多一点,事实上对于panel,dialog,window三个组件,我们往往要求的并非它不能超出浏览器界限。而是要求它不能超出父元素界限,并且当父元素的overflow不是hidden的时候。应该同意组件超出父元素右下側,个人认为这样更合理。

真的这个bug,所以终于的代码改为下面形式较为合理:

/**

 * add by cgh

 * 针对panel window dialog三个组件拖动时会超出父级的元素中的修正

 * 假设父级的元素中的overflow属性为hidden,则修复上下左右个方向

 * 假设父级的元素中的overflow属性为非hidden,则仅仅修复上左两个方向

 * @param left

 * @param top

 * @returns

 */

var easyuiPanelOnMove = function(left, top) {
var parentObj = $(this).panel('panel').parent();
if (left < 0) {
$(this).window('move', {
left : 1
});
}
if (top < 0) {
$(this).window('move', {
top : 1
});
}
var width = $(this).panel('options').width;
var height = $(this).panel('options').height;
var right = left + width;
var buttom = top + height;
var parentWidth = parentObj.width();
var parentHeight = parentObj.height();
if(parentObj.css("overflow")=="hidden"){
if(left > parentWidth-width){
$(this).window('move', {
"left":parentWidth-width
});
}
if(top > parentHeight-height){
$(this).window('move', {
"top":parentHeight-height
});
}
}
};
$.fn.panel.defaults.onMove = easyuiPanelOnMove;
$.fn.window.defaults.onMove = easyuiPanelOnMove;
$.fn.dialog.defaults.onMove = easyuiPanelOnMove;

将js代码保存为js文件,在jquery.easyui.min.js之后引入你保存的js文件就可以。

百度博客搬家:源地址:http://hi.baidu.com/confidence68/item/0f10ab18ad5a96c638cb304c

解决jqueryeasyUI dialog 弹出窗体超出浏览器,导致不能关闭的bug的更多相关文章

  1. jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案

    jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案 2014年8月30日 3233次浏览 相信很多前端朋友都用过jqueryeasyUI,jqueryeasyUI ...

  2. iframe弹出窗体丢失焦点的问题

    好像在不同的浏览器都有这个现象,用javascript弹出一个iframe的窗口,第一次input的焦点是正常的, 然后弹出第二次的时候,选择,按钮都可以获取到,但是input无法获得焦点,而且页面不 ...

  3. Android 如何解决dialog弹出时无法捕捉Activity的back事件

    Android 如何解决dialog弹出时无法捕捉Activity的back事件 在一些情况下,我们需要捕捉back键事件,然后在捕捉到的事件里写入我们需要进行的处理,通常可以采用下面三种办法捕捉到b ...

  4. 解决 jquery dialog 弹框destroy销毁方法不能把弹出元素设置成初始状态

    在使用jquery ui中的dialog弹出窗口的时候遇到一个问题,就是页面弹出窗口关闭后希望表单元素能回到初始状态 例如文本框输入内容后关闭dialog后里面的内容清除,使用了destroy方法也不 ...

  5. 转(C# 类似右键菜单弹出窗体)

    文章来自 https://www.cnblogs.com/ahdung/p/FloatLayerBase.html 每天进步一点点 新建类  FloatLayerBase 继承Form, 自己有点小改 ...

  6. CSS3/jQuery自己定义弹出窗体

    简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css   index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...

  7. gridView AspNetPager 翻页时 弹出窗体关闭报错

    gridView AspNetPager 翻页后,你右击刷新或F5会发现弹出一个刷新页面. 这是因为默认翻页都是用dopostback方式回发的.因为这时的页面已经不是原来的页面.所以会弹出提示. 这 ...

  8. Bootstrap datepicker 在弹出窗体modal中不工作

    解决办法 在 show 方法后面 添加 下面一段代码 $('#modalCard').modal('show');—例子 打开 弹出窗体 //$('#modalCard').modal('hide') ...

  9. MVVM模式下弹出窗体

    原地址:http://www.cnblogs.com/yk250/p/5773425.html 在mvvm模式下弹出窗体,有使用接口模式传入参数new一个对象的,还有的是继承于一个window,然后在 ...

随机推荐

  1. FLV 封装格式解析

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10662941.html FLV (Flash Video) 是由 Adobe 公司推出的 ...

  2. Python和Java编程题(一)

    今天偶尔看到一个博客有贴了五十个编程题,决定以后两天左右做一道题 题目来源:http://blog.sina.com.cn/s/blog_60fafdda0100wb21.html 1.题目 一个数如 ...

  3. [SHOI2006] 有色图

    Description 给一张 \(n\) 个点的无向完全图,同时还有 \(m\) 种颜色.要求给每条边染色,问有多少种不同的染色方案.两种方案不同当且仅当顶点标号任意重排后不同.\(n\leq 53 ...

  4. MONGODB(四)——DBObject与JavaBean转换

    一.DBObject 转为 JavaBean /** * 将实体Bean对象转换成DBObject * */ public static <T> DBObject beanToDBObje ...

  5. AutoIt介绍

    AutoIt的下载网址: https://www.autoitscript.com/site/autoit/downloads/ AutoIt在线文档:http://www.autoit3.cn/Do ...

  6. c# UTF-16转UTF-8 互转

    /// <summary> /// UTF-16转UTF-8 /// </summary> /// <param name="str">< ...

  7. UDP服务器/客户端代码示例

    UDP服务器代码: #include <errno.h> #include <string.h> #include <stdlib.h> #include < ...

  8. Python全栈学习_day003知识点

    今日大纲: . 基础数据类型 总览 . int . bool . str . for循环 1. 基础数据类型 总览 int: 用于计算,计数等 str:'这些内容',用户少量数据的存储,便于操作 bo ...

  9. 机器学习是万能的吗?AI落地有哪些先决条件?

    机器学习是万能的吗?AI落地有哪些先决条件? https://mp.weixin.qq.com/s/9rNY2YA3BMpoY8NQ_rVIjQ 1.引言 入门机器学习或从事其相关工作前,不知道你思考 ...

  10. 英雄无敌HoMM3-死亡阴影SOD-神之苏醒WOG-封神NABI-MOD等相关文件

    英雄无敌HoMM3:死亡阴影SOD 英雄无敌3之死亡阴影(Heroes of Might and Magic III: Shadow of Death,简记为HoMM III: SOD)发行于1999 ...