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高度自动变小。通过计数器修正。

实现代码：

最终综合两种方案，整理出代码：

 

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 === 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