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

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

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

效果演示：

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