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

时间:13-04-27 栏目:EasyUI, web前端 作者:zongyan86 评论:0 点击: 7,173 次

本文转自:http://www.easyui.info/archives/689.html
其实,我在项目里面一般会让弹出框不能移动。我觉得移动其实没什么多大的用处。用户体验貌似也没差多少。so,你懂的。刚看到这文章还是转下吧。
 
之前分别写过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。
 

web开发技术



声明: 本文由( zongyan86 )原创编译,转载请保留链接: panel,dialog,window组件越界问题汇总

关注我们