补充解决easyui messager越界问题

最新推荐文章于 2025-08-22 11:32:18 发布

转载最新推荐文章于 2025-08-22 11:32:18 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/janric/blog/159429

文章标签：

#javascript #ViewUI

本文深入探讨了为何大多数程序员难以成为架构师的原因，并提供了有效的解决方案，帮助开发者克服转型障碍。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

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
});
}
// 在之前的代码上加上这句代码就可以解决messager越界的问题
if (isNaN(height)) {
height = $(this).parent().height();
}
if (top > parentObj.height() - height) {
$(this).panel('move', {
"top" : parentObj.height() - height
});
}
}
};


$.fn.panel.defaults.onResize = easyuiPanelOnResize;
$.fn.window.defaults.onResize = easyuiPanelOnResize;
$.fn.dialog.defaults.onResize = easyuiPanelOnResize;
$.fn.window.defaults.onMove = easyuiPanelOnMove;
$.fn.panel.defaults.onMove = easyuiPanelOnMove;
$.fn.dialog.defaults.onMove = easyuiPanelOnMove;

解决一个小bug：由于messager组件的高度是自动的，所以获取到的height是auto，计算后得到的是NaN，就不能进入判断，所以不能解决messager向下越界的问题，同过获取messager的上级组件的的高度可以解决该问题

转载于:https://my.oschina.net/janric/blog/159429