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.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;