使用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. Angular2入门:TypeScript的类型 - let , var, const

    一.let 二.const

  2. Algolia使用教程 , 超详细傻子看都会

    框架描述 发现网上Algolia这块的资料较少,就花了点时间从官网上整理了下,总结了几项常用的功能用法. 现在比较有名的Algolia提供了云搜索的服务.具体办法是我们将数据库的信息以JSON的格式上 ...

  3. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  4. JavaScript防抖节流函数

    1.直接上码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  5. 钉钉接口:获取accessToken和打卡记录【分享】

    post和get方法工具类:HttpUtils package weaver.dingtalk.utils; import com.alibaba.fastjson.JSONObject; impor ...

  6. C# 基础运算符及运算

    本节主要讲述运算符的分类及其实际运用 运算符 分类 符号 解释 优先级 算数 ++  -- 加加(加1)  减减(减1) 由高到低,即执行顺序由上到下(圆括号的优先级最高) *  /  % 乘  除  ...

  7. [PHP] 算法-数组中出现次数超过一半的数字的PHP实现

    数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2.如果不存在 ...

  8. JAVA的高并发基础认知 二

    一.JAVA高级并发 1.5JDK之后引入高级并发特性,大多数的特性在java.util.concurrent 包中,是专门用于多线程发编程的,充分利用了现代多处理器和多核心系统的功能以编写大规模并发 ...

  9. Python 获取时间

    记录下 Python 下获取时间的方法 time 模块 import time time_format = '%Y-%m-%d %X' time_current = time.strftime(tim ...

  10. CSS3效果:实现气泡效果

    首先定义一个 <p class="speech"></p> 先给外层的容器添加样式: p.speech { position: relative; widt ...