WebUI框架使用参考
关注jQuery easyui,zTree,my97,highcharts等前台UI的使用

前面有篇文章提到过panel,dialog,window三个组件有时候会被拖到父元素之外而无法被拖回，当时是采用监听panel组件的onMove实现阻止超出父元素边界的，所以并没有考虑窗口调整大小(resize)造成超出边界的情况，本问通过监听panel组件onResize回调来阻止因resize而超出边界的情况。

必要准备：

要想包裹住panel，因为panel默认的position是absolute，所以父元素的position属性必须为relative或者absolute，这是css规则。在父元素为relative定位的前提下还要对overflow做区别，如果父元素的overflow是auto的话，我们是不应该阻止窗口超过右下边界的，要想阻止窗口上下左右方向均不超出父元素边界，最好设置父元素的overflow属性为hidden。

实现代码：

在父元素relative和overflow属性满足条件的情况下，我们只要利用jquery的position()方法获取panel组件的left和top属性，结合onResize的width和height入参，我们就很容易控制住窗口可以拖动的范围，直接上代码：

/**
 * add by cgh 针对panel window dialog三个组件调整大小时会超出父级元素的修正
 * 如果父级元素的overflow属性为hidden，则修复上下左右个方向 如果父级元素的overflow属性为非hidden，则只修复上左两个方向
 * 
 * @param width
 * @param height
 * @returns
 */
var easyuiPanelOnResize = function(width, height) {
	var parentObj = $(this).panel('panel').parent();
	var left = $(this).panel('panel').position().left;
	var top = $(this).panel('panel').position().top;
	if (left < 0) {
		$(this).panel('move', {
					left : 1
				}).panel('resize', {
					width : width + left + 1
				});
	}
	if (top < 0) {
		$(this).panel('move', {
					top : 1
				}).panel('resize', {
					height : height + top + 1
				});
	}
	if (parentObj.css("overflow") == "hidden") {
		if (width + left > parentObj.width()) {
			$(this).panel('resize', {
						width : parentObj.width() - left - 1
					});
		}

		if (height + top > parentObj.height()) {
			$(this).panel('resize', {
						height : parentObj.height() - top - 1
					});
		}
	}
};
$.fn.panel.defaults.onResize = easyuiPanelOnResize;
$.fn.window.defaults.onResize = easyuiPanelOnResize;
$.fn.dialog.defaults.onResize = easyuiPanelOnResize;

使用方法：

在引入juqery的和jQuery easyui的核心文件后，引入本文的javascript代码即可，直接定义了panel，window，dialog的onResize回调，所以请注意不要在别的地方覆盖；再结合前面的那篇文章就可以同时阻止拖动和调整大小造成这三个组件窗口越界的情况了。

效果演示：

http://www.easyui.info/easyui/demo/window/062.html

更新日志：

请参照http://www.easyui.info/archives/689.html进行修改