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 = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', 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 === {
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