解决jqueryeasyUI dialog 弹出窗体超出浏览器,导致不能关闭的bug
使用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的更多相关文章
- jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案
jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案 2014年8月30日 3233次浏览 相信很多前端朋友都用过jqueryeasyUI,jqueryeasyUI ...
- iframe弹出窗体丢失焦点的问题
好像在不同的浏览器都有这个现象,用javascript弹出一个iframe的窗口,第一次input的焦点是正常的, 然后弹出第二次的时候,选择,按钮都可以获取到,但是input无法获得焦点,而且页面不 ...
- Android 如何解决dialog弹出时无法捕捉Activity的back事件
Android 如何解决dialog弹出时无法捕捉Activity的back事件 在一些情况下,我们需要捕捉back键事件,然后在捕捉到的事件里写入我们需要进行的处理,通常可以采用下面三种办法捕捉到b ...
- 解决 jquery dialog 弹框destroy销毁方法不能把弹出元素设置成初始状态
在使用jquery ui中的dialog弹出窗口的时候遇到一个问题,就是页面弹出窗口关闭后希望表单元素能回到初始状态 例如文本框输入内容后关闭dialog后里面的内容清除,使用了destroy方法也不 ...
- 转(C# 类似右键菜单弹出窗体)
文章来自 https://www.cnblogs.com/ahdung/p/FloatLayerBase.html 每天进步一点点 新建类 FloatLayerBase 继承Form, 自己有点小改 ...
- CSS3/jQuery自己定义弹出窗体
简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...
- gridView AspNetPager 翻页时 弹出窗体关闭报错
gridView AspNetPager 翻页后,你右击刷新或F5会发现弹出一个刷新页面. 这是因为默认翻页都是用dopostback方式回发的.因为这时的页面已经不是原来的页面.所以会弹出提示. 这 ...
- Bootstrap datepicker 在弹出窗体modal中不工作
解决办法 在 show 方法后面 添加 下面一段代码 $('#modalCard').modal('show');—例子 打开 弹出窗体 //$('#modalCard').modal('hide') ...
- MVVM模式下弹出窗体
原地址:http://www.cnblogs.com/yk250/p/5773425.html 在mvvm模式下弹出窗体,有使用接口模式传入参数new一个对象的,还有的是继承于一个window,然后在 ...
随机推荐
- shiro源码篇 - shiro的session共享,你值得拥有
前言 开心一刻 老师对小明说:"乳就是小的意思,比如乳猪就是小猪,乳名就是小名,请你用乳字造个句" 小明:"我家很穷,只能住在40平米的乳房" 老师:" ...
- Linux进程间通信(System V) --- 消息队列
消息队列 IPC 原理 消息队列是消息的链式队列,如下图为消息队列的模型.整个消息队列有两种类型的数据结构. 1.msqid_ds 消息队列数据结构:描述整个消息队列的属性,主要包括整个消息队列的权限 ...
- 无法打开锁文件 /var/lib/dpkg/lock - open (13: 权限不够)
比如输入apt-get install eclipse,或者apt-get update 会提示 无法打开锁文件 /var/lib/dpkg/lock - open (13: 权限不够) 无法对状态 ...
- 【Java基础】4、java中的内部类
内部类的分类:常规内部类.静态内部类.私有内部类.局部内部类.匿名内部类. 实例1:常规内部类 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2 ...
- The Most Simple Introduction to Hypothesis Testing
https://www.youtube.com/watch?v=UApFKiK4Hi8
- springMVC 拦截器源码解析
前言:这两天学习了代理模式,自然想到了 springmvc 的 aop 使用的就是动态代理,拦截器使用的就是 jdk 的动态代理.今天看了看源码,记录一下.转载请注明出处:https://www.cn ...
- IDEA——错误: 找不到或无法加载主类 com.Main
https://blog.csdn.net/gxx_csdn/article/details/79059884 这篇博客非常赞!
- 关于vue,webpack 中 “exports is not defined”报错
vue项目npm run dev 后项目报错 : 提示 “exports is not defined”. 导致这个问题是因为balbel的配置文件.babelrc的问题: { "prese ...
- Navicat安装及简单使用
一.安装 下载完之后,直接解压出来就能用,看一下解压之后的目录: 双击打开下面这个文件(可以把它添加一个桌面快捷方式,或者添加到任务栏): 然后会提示你输入注册码: 回到navicat的解压出来的文件 ...
- docker 安装 gitlab
基于Docker部署GitLab环境搭建 建议虚拟机内存2G以上 1.下载镜像文件 docker pull beginor/gitlab-ce:11.0.1-ce.0 注意:一定要配置阿里云的加速镜像 ...