panel,dialog,window组件越界(超出范围)问题汇总
之前分别写过panel,dialog,window三个组件因为拖曳或者reSize造成组件越界而无法还原的问题,两篇文章分别针对拖曳和reSize给出了解决方案。不过根据朋友的反馈,reSize的解决方案和拖曳的解决方案同时使用时存在效率低下的问题,个人也在进一步使用过程中发现了另外一些问题,共修正以下Bug:
- 原生panel并无拖曳和缩放功能,且继承panel组件的上层组件太多,极容易出问题,故放弃对panel组件的支持。
- onResize配合onMove使用时,性能低下,原因是由onResize触发的onMove内部死循环。已修正。
- resize时,超越浏览器边界会造成缩放和拖动都不可用。通过增加了对offset的监控修正
- IE8下,reSize超越浏览器边界后依旧会造成缩放和拖曳不可用,原因是IE8此时不影响onkeyup事件。已修正。
- window,dioalg内部包含layout,datagrid组件时,resize高度小于一定值会造成性能低下。已修正。
- 初始化时,如果页面不是最大化,onResize会把window和dialog高度自动变小。通过计数器修正。
实现代码:
最终综合两种方案,整理出代码:
- var ie = (function() {
- var undef, v = 3, div = document.createElement('div'), all = div
- .getElementsByTagName('i');
- while (div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0]);
- return v > 4 ? v : undef;
- }());
- /**
- * add by cgh
- * 针对panel window dialog三个组件调整大小时会超出父级元素的修正
- * 如果父级元素的overflow属性为hidden,则修复上下左右个方向
- * 如果父级元素的overflow属性为非hidden,则只修复上左两个方向
- * @param width
- * @param height
- * @returns
- */
- var easyuiPanelOnResize = function(width, height) {
- if (!$.data(this, 'window') && !$.data(this, 'dialog'))
- return;
- if (ie === 8) {
- var data = $.data(this, "window") || $.data(this, "dialog");
- if (data.pmask) {
- var masks = data.window.nextAll('.window-proxy-mask');
- if (masks.length > 1) {
- $(masks[1]).remove();
- masks[1] = null;
- }
- }
- }
- if ($(this).panel('options').maximized == true) {
- $(this).panel('options').fit = false;
- }
- $(this).panel('options').reSizing = true;
- if (!$(this).panel('options').reSizeNum) {
- $(this).panel('options').reSizeNum = 1;
- } else {
- $(this).panel('options').reSizeNum++;
- }
- var parentObj = $(this).panel('panel').parent();
- var left = $(this).panel('panel').position().left;
- var top = $(this).panel('panel').position().top;
- if ($(this).panel('panel').offset().left < 0) {
- $(this).panel('move', {
- left : 0
- });
- }
- if ($(this).panel('panel').offset().top < 0) {
- $(this).panel('move', {
- top : 0
- });
- }
- if (left < 0) {
- $(this).panel('move', {
- left : 0
- }).panel('resize', {
- width : width + left
- });
- }
- if (top < 0) {
- $(this).panel('move', {
- top : 0
- }).panel('resize', {
- height : height + top
- });
- }
- if (parentObj.css("overflow") == "hidden") {
- var inline = $.data(this, "window").options.inline;
- if (inline == false) {
- parentObj = $(window);
- }
- if ((width + left > parentObj.width())
- && $(this).panel('options').reSizeNum > 1) {
- $(this).panel('resize', {
- width : parentObj.width() - left
- });
- }
- if ((height + top > parentObj.height())
- && $(this).panel('options').reSizeNum > 1) {
- $(this).panel('resize', {
- height : parentObj.height() - top
- });
- }
- }
- $(this).panel('options').reSizing = false;
- };
- /**
- * add by cgh
- * 针对panel window dialog三个组件拖动时会超出父级元素的修正
- * 如果父级元素的overflow属性为hidden,则修复上下左右个方向
- * 如果父级元素的overflow属性为非hidden,则只修复上左两个方向
- * @param left
- * @param top
- * @returns
- */
- var easyuiPanelOnMove = function(left, top) {
- if ($(this).panel('options').reSizing)
- return;
- var parentObj = $(this).panel('panel').parent();
- 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 (left < 0) {
- $(this).panel('move', {
- left : 0
- });
- }
- if (top < 0) {
- $(this).panel('move', {
- top : 0
- });
- }
- if (parentObj.css("overflow") == "hidden") {
- var inline = $.data(this, "window").options.inline;
- if (inline == false) {
- parentObj = $(window);
- }
- if (left > parentObj.width() - width) {
- $(this).panel('move', {
- "left" : parentObj.width() - width
- });
- }
- if (top > parentObj.height() - height) {
- $(this).panel('move', {
- "top" : parentObj.height() - height
- });
- }
- }
- };
- $.fn.window.defaults.onResize = easyuiPanelOnResize;
- $.fn.dialog.defaults.onResize = easyuiPanelOnResize;
- $.fn.window.defaults.onMove = easyuiPanelOnMove;
- $.fn.dialog.defaults.onMove = easyuiPanelOnMove;
使用的时候,请在引入easyui的核心文件后,直接追加以上代码,注意不要写在document.ready里面。
到这里,panel,window,dialog等组件越界的问题就算是基本解决了。欢迎大家测试,即时反馈Bug。
效果演示:
http://www.easyui.info/easyui/demo/window/062.html
panel,dialog,window组件越界(超出范围)问题汇总的更多相关文章
- panel,dialog,window组件越界问题汇总
之前分别写过panel,dialog,window三个组件因为拖曳或者reSize造成组件越界而无法还原的问题,两篇文章分别针对拖曳和reSize给出了解决方案.不过根据朋友的反馈,reSize的解决 ...
- 解决jqueryeasyUI dialog 弹出窗体超出浏览器,导致不能关闭的bug
使用panel的onMove事件攻克了panel,dialog以及window组件在被拖动时,会超出浏览器边界而无法拖回的情况. 当窗体被拖出浏览器有边界时.$(document).width();会 ...
- jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案
jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案 2014年8月30日 3233次浏览 相信很多前端朋友都用过jqueryeasyUI,jqueryeasyUI ...
- Dialog( 对话框) 组件
一. 加载方式//class 加载方式<div class="easyui-dialog" title="My Dialog"style="wi ...
- 第二百零四节,jQuery EasyUI,Dialog(对话框)组件
jQuery EasyUI,Dialog(对话框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Dialog(窗口)组件的使用方法,这个组件依赖 ...
- ExtJS学习之路第八步:Window组件
一个专门Panel用作程序窗口.默认的,Window可以是浮动的(floated).可缩放(resizable)以及可拖动的(draggable).Window能够被最大化适应可视窗口,(restor ...
- EasyUI 关于IE使用window组件上传文件
有时候IE会对使用window组件上传文件(第二次)不生效,解决方案是: 将该window每次打开的时候,使用: $('#adUploadWindow').window('refresh', 'pan ...
- Javascript - ExtJs - Window组件
1.所有组件都可以放入window,此时子组件不需要配置renderTo,只需要将它们作为window的items子项即可. 2.items子项必须先创建,最后创建window,否则子项不会显示. 3 ...
- 无废话ExtJs 入门教程三[窗体:Window组件]
无废话ExtJs 入门教程三[窗体:Window组件] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3 ...
随机推荐
- Codeforces Beta Round #6 (Div. 2 Only) B. President's Office 水题
B. President's Office 题目连接: http://codeforces.com/contest/6/problem/B Description President of Berla ...
- bzoj 3172: [Tjoi2013]单词 AC自动机
3172: [Tjoi2013]单词 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/pr ...
- Codeforces Round #304 (Div. 2) C. Soldier and Cards 水题
C. Soldier and Cards Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/546 ...
- Colorful Lecture Note
Colorful Lecture Note 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Little Hi is writing an algorithm lectu ...
- Windows Sysinternals Suite
Windows Sysinternals Suite 是一套由微软官方免费提供的系统工具集,其中包含了大量超级实的优秀绿色小软件,譬如 Desktops (虚拟桌面).Process Explorer ...
- LT1072 -- Wide-range voltage regulator automatically selects operating mode
The circuit in Figure 1 delivers programming voltages to an EEPROM under the control of an external ...
- STM32F401
The STM32F401 line is the entry level to the STM32 F4 series. It is designed for medical, industrial ...
- 关于Unity3D的编辑器崩溃时的线索定位
今天在Unity3D编辑器中进行功能測试的时候,编辑器突然崩溃了(就是整个窗体突然消失,进程直接结束)之后也没有不论什么错误报告信息提示.好吧,应该是偶现问题.我侥幸地想,我用的好歹也是正版啊,不应该 ...
- 错误 1 error C4996: 'strcpy': This function or variable may be unsafe. Consider using strcpy_s instead. To disable deprecation, use . See online help for details.
出现这种警告的原因是因为我们没有使用安全的字符串处理函数.如果想屏蔽这种警告,可以使用: 还可以使用其它的方法,参考: https://www.cnblogs.com/gb2013/archive/2 ...
- OpenShift跨版本升级
官方的in-place upgrade直接在线升级的参考链接 https://docs.openshift.com/container-platform/3.11/upgrading/automate ...