jquery esayui panel,dialog,window组件越界问题汇总

引用自：http://www.easyui.info/archives/689.html

实现代码：

最终综合两种方案，整理出代码：
1 var ie = (function() {
2 var undef, v = 3, div = document.createElement('div'), all = div
3 .getElementsByTagName('i');
4 while (div.innerHTML = '', all[0]);
5 return v > 4 ? v : undef;
6 }());
7 /**
8 * add by cgh
9 * 针对panel window dialog三个组件调整大小时会超出父级元素的修正
10 * 如果父级元素的overflow属性为hidden，则修复上下左右个方向
11 * 如果父级元素的overflow属性为非hidden，则只修复上左两个方向
12 * @param width
13 * @param height
14 * @returns
15 */
16 var easyuiPanelOnResize = function(width, height) {
17 if (!$.data(this, 'window') && !$.data(this, 'dialog'))
18 return;
19
20 if (ie === 8) {
21 var data = $.data(this, "window") || $.data(this, "dialog");
22 if (data.pmask) {
23 var masks = data.window.nextAll('.window-proxy-mask');
24 if (masks.length > 1) {
25 $(masks[1]).remove();
26 masks[1] = null;
27 }
28 }
29 }
30 if ($(this).panel('options').maximized == true) {
31 $(this).panel('options').fit = false;
32 }
33 $(this).panel('options').reSizing = true;
34 if (!$(this).panel('options').reSizeNum) {
35 $(this).panel('options').reSizeNum = 1;
36 } else {
37 $(this).panel('options').reSizeNum++;
38 }
39 var parentObj = $(this).panel('panel').parent();
40 var left = $(this).panel('panel').position().left;
41 var top = $(this).panel('panel').position().top;
42
43 if ($(this).panel('panel').offset().left < 0) {
44 $(this).panel('move', {
45 left : 0
46 });
47 }
48 if ($(this).panel('panel').offset().top < 0) {
49 $(this).panel('move', {
50 top : 0
51 });
52 }
53
54 if (left < 0) {
55 $(this).panel('move', {
56 left : 0
57 }).panel('resize', {
58 width : width + left
59 });
60 }
61 if (top < 0) {
62 $(this).panel('move', {
63 top : 0
64 }).panel('resize', {
65 height : height + top
66 });
67 }
68 if (parentObj.css("overflow") == "hidden") {
69 var inline = $.data(this, "window").options.inline;
70 if (inline == false) {
71 parentObj = $(window);
72 }
73
74 if ((width + left > parentObj.width())
75 && $(this).panel('options').reSizeNum > 1) {
76 $(this).panel('resize', {
77 width : parentObj.width() - left
78 });
79 }
80
81 if ((height + top > parentObj.height())
82 && $(this).panel('options').reSizeNum > 1) {
83 $(this).panel('resize', {
84 height : parentObj.height() - top
85 });
86 }
87 }
88 $(this).panel('options').reSizing = false;
89 };
90 /**
91 * add by cgh
92 * 针对panel window dialog三个组件拖动时会超出父级元素的修正
93 * 如果父级元素的overflow属性为hidden，则修复上下左右个方向
94 * 如果父级元素的overflow属性为非hidden，则只修复上左两个方向
95 * @param left
96 * @param top
97 * @returns
98 */
99 var easyuiPanelOnMove = function(left, top) {
100 if ($(this).panel('options').reSizing)
101 return;
102 var parentObj = $(this).panel('panel').parent();
103 var width = $(this).panel('options').width;
104 var height = $(this).panel('options').height;
105 var right = left + width;
106 var buttom = top + height;
107 var parentWidth = parentObj.width();
108 var parentHeight = parentObj.height();
109
110 if (left < 0) {
111 $(this).panel('move', {
112 left : 0
113 });
114 }
115 if (top < 0) {
116 $(this).panel('move', {
117 top : 0
118 });
119 }
120
121 if (parentObj.css("overflow") == "hidden") {
122 var inline = $.data(this, "window").options.inline;
123 if (inline == false) {
124 parentObj = $(window);
125 }
126 if (left > parentObj.width() - width) {
127 $(this).panel('move', {
128 "left" : parentObj.width() - width
129 });
130 }
131 if (top > parentObj.height() - height) {
132 $(this).panel('move', {
133 "top" : parentObj.height() - height
134 });
135 }
136 }
137 };
138
139 $.fn.window.defaults.onResize = easyuiPanelOnResize;
140 $.fn.dialog.defaults.onResize = easyuiPanelOnResize;
141 $.fn.window.defaults.onMove = easyuiPanelOnMove;
142 $.fn.dialog.defaults.onMove = easyuiPanelOnMove;

使用的时候，请在引入easyui的核心文件后，直接追加以上代码，注意不要写在document.ready里面。

到这里，panel，window，dialog等组件越界的问题就算是基本解决了。欢迎大家测试，即时反馈Bug。
效果演示：

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