为什么80%的码农都做不了架构师?>>>
之前分别写过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高度自动变小。通过计数器修正。
实现代码:
最终综合两种方案,整理出代码:
var ie = (function() {var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');while (div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',all[0]);return v > 4 ? v : undef;
}());
/*** add by cgh* 针对panel window dialog三个组件调整大小时会超出父级元素的修正* 如果父级元素的overflow属性为hidden,则修复上下左右个方向* 如果父级元素的overflow属性为非hidden,则只修复上左两个方向* @param width* @param height* @returns*/
var easyuiPanelOnResize = function(width, height) {if (!$.data(this, 'window') && !$.data(this, 'dialog'))return;if (ie === 8) {var data = $.data(this, "window") || $.data(this, "dialog");if (data.pmask) {var masks = data.window.nextAll('.window-proxy-mask');if (masks.length > 1) {$(masks[1]).remove();masks[1] = null;}}}if ($(this).panel('options').maximized == true) {$(this).panel('options').fit = false;}$(this).panel('options').reSizing = true;if (!$(this).panel('options').reSizeNum) {$(this).panel('options').reSizeNum = 1;} else {$(this).panel('options').reSizeNum++;}var parentObj = $(this).panel('panel').parent();var left = $(this).panel('panel').position().left;var top = $(this).panel('panel').position().top;if ($(this).panel('panel').offset().left < 0) {$(this).panel('move', {left : 0});}if ($(this).panel('panel').offset().top < 0) {$(this).panel('move', {top : 0});}if (left < 0) {$(this).panel('move', {left : 0}).panel('resize', {width : width + left});}if (top < 0) {$(this).panel('move', {top : 0}).panel('resize', {height : height + top});}if (parentObj.css("overflow") == "hidden") {var inline = $.data(this, "window").options.inline;if (inline == false) {parentObj = $(window);}if ((width + left > parentObj.width())&& $(this).panel('options').reSizeNum > 1) {$(this).panel('resize', {width : parentObj.width() - left});}if ((height + top > parentObj.height())&& $(this).panel('options').reSizeNum > 1) {$(this).panel('resize', {height : parentObj.height() - top});}}$(this).panel('options').reSizing = false;
};
/*** add by cgh* 针对panel window dialog三个组件拖动时会超出父级元素的修正* 如果父级元素的overflow属性为hidden,则修复上下左右个方向* 如果父级元素的overflow属性为非hidden,则只修复上左两个方向* @param left* @param top* @returns*/
var easyuiPanelOnMove = function(left, top) {if ($(this).panel('options').reSizing)return;var parentObj = $(this).panel('panel').parent();var width = $(this).panel('options').width;var height = $(this).panel('options').height;/*var right = left + width;var buttom = top + height;var parentWidth = parentObj.width();var parentHeight = parentObj.height();*/if (left < 0) {$(this).panel('move', {left : 0});}if (top < 0) {$(this).panel('move', {top : 0});}if (parentObj.css("overflow") == "hidden") {var inline = $.data(this, "window").options.inline;if (inline == false) {parentObj = $(window);}if (left > parentObj.width() - width) {$(this).panel('move', {"left" : parentObj.width() - width});}if (top > parentObj.height() - height) {$(this).panel('move', {"top" : parentObj.height() - height});}}
};$.fn.panel.defaults.onResize = easyuiPanelOnResize;
$.fn.window.defaults.onResize = easyuiPanelOnResize;
$.fn.dialog.defaults.onResize = easyuiPanelOnResize;
$.fn.window.defaults.onMove = easyuiPanelOnMove;
$.fn.panel.defaults.onMove = easyuiPanelOnMove;
$.fn.dialog.defaults.onMove = easyuiPanelOnMove;