码迷，mamicode.com
首页 > Windows程序 > 详细

panel,dialog,window组件越界(超出范围)问题汇总

时间：2015-03-20 10:53:33      阅读：289      评论：0      收藏：0      [点我收藏+]

标签：

参考地址

之前分别写过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

panel,dialog,window组件越界(超出范围)问题汇总

标签：

原文地址：http://www.cnblogs.com/zhangwei595806165/p/4352952.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！