使用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. Form的enctype属性

    Form的enctype属性 一般都使用html的Form表单通过HTTP POST方法发送Request body.下面是一个form: <form action="/process ...

  2. SpringMVC Hello World

    前言 新年伊始,元宵佳节,窗外灯火通明,炮声连连.北漂以来第一次一个人在北京过十五. 切入正题,收假后一边要赶项目进度还要学习java,so在元宵佳节之际写了第一篇SpringMVC Hello Wo ...

  3. 对于Ext.data.Store 介紹 与总结,以及对以前代码的重构与优化

    对于Ext.data.Store 一直不是很了解,不知道他到底是干嘛的有哪些用处,在实际开发中也由于不了解也走了不少弯路, store是一个为Ext器件提供record对象的存储容器,行为和属性都很象 ...

  4. hadoop 集群中数据块的副本存放策略

    HDFS采用一种称为机架感知(rack-aware)的策略来改进数据的可靠性.可用性和网络带宽的利用率.目前实现的副本存放策略只是在这个方向上的第一步.实现这个策略的短期目标是验证它在生产环境下的有效 ...

  5. tomcat8 manager页面限制IP访问

    tomcat8 manager页面限制IP访问 配置tomcat8/webapps/manager/META-INF/context.xml <Context antiResourceLocki ...

  6. Linux常用基本命令:三剑客命令之-awk数组用法

    AWK的数组用法跟javascript类似. 1,定义数组 awk 'BEGIN{a[0]="zhangsan";a[1]="lisi";print a[0]} ...

  7. unity相机跟随Player常用方式

    固定跟随,无效果(意义不大) public class FollowPlayer : MonoBehaviour { public Transform Player; private Vector3 ...

  8. 【工具相关】Web-将网站放在XAMPP上面

    一,将XAMPP服务器打开--->Welcome--->Open Application Folder. 二,会出现如下所示界面.找到htdocs. 三,打开htdocs.如下图所示. 四 ...

  9. VUE组件 之 倒计时(防刷新)

    思路: 一.效果图: 二.CSS代码 .box{ width: 300px; height: 100px; line-height: 100px; margin: 100px auto; backgr ...

  10. Visualforce简介

    Visualforce Visualforce是一个和Apex语言相匹配的开发框架.开发者可以使用Visualforce和Apex建立自定义网络应用程序. Visualforce的基本功能类似于前端框 ...