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

实现代码：

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

var ie = (function() {
var undef, v = 3, div = document.createElement('div'), all = div
.getElementsByTagName('i');
while (div.innerHTML = '', 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.window.defaults.onResize = easyuiPanelOnResize;
$.fn.dialog.defaults.onResize = easyuiPanelOnResize;
$.fn.window.defaults.onMove = easyuiPanelOnMove;
$.fn.dialog.defaults.onMove = easyuiPanelOnMove;

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

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

效果演示：

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

转载于:https://www.cnblogs.com/telwanggs/p/5717647.html

panel,dialog,window组件越界问题汇总相关推荐

Extjs window组件拖动统制
Extjs window组件拖动控制有时候一拖就拖出了浏览器,在想拖回来就不好办了: 解决办法: 参考以下代码,在加载Ext核心库以后执行: Ext.override(Ext.Window, { ...
CSS3新特性总结及CSS组件、特效汇总
本文分2部分: 之前写的CSS3新特性详解篇,共6篇博文总结: 常见的一些CSS组件.效果汇总(不包括BootStrap等前端框架已实现的CSS组件): 一.CSS3新特性总结 1.CSS3选择器.边 ...
Vue组件封装 ——dialog对话框组件
一.基础准备工作 1.创建一个基础的vue项目包 2.创建components文件夹,用于存放组件,新建dialog.vue组件,可以自己取个名字 <script> export def ...
Electron-vue dialog.messageBox 组件使用
dialog.messageBox组件 dialog.messageBox 组件是 electron 的原生组件,在不同系统中的样式不同,本文主要介绍在 win10 下的显示效果文章目录 dialo ...
Coolite Toolkit学习笔记四：容器控件之FiledSet、Panel和Window
一.FieldSet控件 FieldSet控件在开发中使用率还是很高的,毕竟Web中微软没有提供Group控件,通常都是使用FieldSet来进行表单等界面布局分组.在Coolite To ...
Flutter Dialog弹窗组件
文章目录弹窗系列组件概述 showDialog showCupertinoDialog showGeneralDialog showBottomSheet showModalBottomSheet ...
封装Dialog子组件解决 visible.sync问题
子组件 1.visible.sync语法糖简单介绍 ** <child-dialog :visible.sync="visible"></child-dialog ...
ExtJs 入门 [窗体：Window组件]
<head></head> 之间: <script type="text/javascript" src="extjs/ext-all.js ...
超实用的 Vue 组件通信方式大汇总（8种）
文章目录前言一.Vue组件关系二.Vue组件通信方式 1. props / $emit 1.1 props 父传子 1.2 $emit 子传父 1.3 父子组件双向绑定 1.3.1 v-mode ...

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

实现代码：

效果演示：

panel,dialog,window组件越界问题汇总相关推荐

最新文章

热门文章