使用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. node-webkit无边框窗口用纯JS实现拖动改变大小

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     & ...

  2. [java]我的数据在哪里?——数据的内存模型

    在编写程序时,我们也许会有这样一个问题,我们编写的程序中的数据运行时,会保存在哪里呢?简单直接的回答可能是——内存.这个回答在多数情况下可能都是对的,但事实上并不准确,我们都知道内存,即随机访问存储器 ...

  3. Java的适配器模式

    所谓适配器模式,其实很简单,就是将一个类的接口转换成客户端所期待的另一个接口,使得原本不兼容的两个类可以一起工作. 假设我们有一个Type-c接口,但是要使用的接口确实usb的接口,这时候要怎么办呢? ...

  4. js查询数组或者List类型是否包含某个元素

    方法一:arr.indexOf(某元素) 实际用法:if(arr.indexOf(某元素) > -1){//则包含该元素} 例: var fruits = ["Banana" ...

  5. 【代码笔记】Web-ionic-头部与底部

    index代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  6. 【读书笔记】iOS-属性中的内存管理参数

    一,assign 代表设置时候直接赋值,而不是复制或者保留它. 二,retain. 会在赋值的时候把新值保留.此属性只能用于Object-C对象类型. 三,copy 在赋值时,将新值复制一份,复制工作 ...

  7. js 复制文本到粘贴板

    //html 在iOS Safari中,剪贴板API有一些限制(实际上是安全措施):   于安全原因,iOS Safari只允许容器中的document.execCommand('copy')文本co ...

  8. Linux环境下运行简单java程序

    一.安装java 1.下载jdk8 登录网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213315 ...

  9. Java数据解析---JSON

    一.Java数据解析分为:XML解析和JSON解析 XML解析即是对XML文件中的数据解析,而JSON解析即对规定形式的数据解析,比XML解析更加方便 JSON解析基于两种结构: 1.键值对类型 { ...

  10. 09-OpenLDAP加密传输配置

    OpenLDAP加密传输配置(CA服务器与openldap服务器异机) 阅读视图 环境准备 CA证书服务器搭建 OpenLDAP服务端与CA集成 OpenLDAP客户端配置 客户端测试验证 故障处理 ...