现在的位置: 首页 > easyui > Layout > panel > 正文
防止panel,dialog,window窗口因调整大小超出边界
2012年10月31日 panel, window ⁄ 共 1724字 评论数 10 ⁄ 被围观 18,800 views+
文章目录
[隐藏]

前面有篇文章提到过panel,dialog,window三个组件有时候会被拖到父元素之外而无法被拖回,当时是采用监听panel组件的onMove实现阻止超出父元素边界的,所以并没有考虑窗口调整大小(resize)造成超出边界的情况,本问通过监听panel组件onResize回调来阻止因resize而超出边界的情况。

必要准备:

要想包裹住panel,因为panel默认的position是absolute,所以父元素的position属性必须为relative或者absolute,这是css规则。在父元素为relative定位的前提下还要对overflow做区别,如果父元素的overflow是auto的话,我们是不应该阻止窗口超过右下边界的,要想阻止窗口上下左右方向均不超出父元素边界,最好设置父元素的overflow属性为hidden。

实现代码:

在父元素relative和overflow属性满足条件的情况下,我们只要利用jquery的position()方法获取panel组件的left和top属性,结合onResize的width和height入参,我们就很容易控制住窗口可以拖动的范围,直接上代码:

/**
 * add by cgh 针对panel window dialog三个组件调整大小时会超出父级元素的修正
 * 如果父级元素的overflow属性为hidden,则修复上下左右个方向 如果父级元素的overflow属性为非hidden,则只修复上左两个方向
 * 
 * @param width
 * @param height
 * @returns
 */
var easyuiPanelOnResize = function(width, height) {
	var parentObj = $(this).panel('panel').parent();
	var left = $(this).panel('panel').position().left;
	var top = $(this).panel('panel').position().top;
	if (left < 0) {
		$(this).panel('move', {
					left : 1
				}).panel('resize', {
					width : width + left + 1
				});
	}
	if (top < 0) {
		$(this).panel('move', {
					top : 1
				}).panel('resize', {
					height : height + top + 1
				});
	}
	if (parentObj.css("overflow") == "hidden") {
		if (width + left > parentObj.width()) {
			$(this).panel('resize', {
						width : parentObj.width() - left - 1
					});
		}

		if (height + top > parentObj.height()) {
			$(this).panel('resize', {
						height : parentObj.height() - top - 1
					});
		}
	}
};
$.fn.panel.defaults.onResize = easyuiPanelOnResize;
$.fn.window.defaults.onResize = easyuiPanelOnResize;
$.fn.dialog.defaults.onResize = easyuiPanelOnResize;

使用方法:

在引入juqery的和jQuery easyui的核心文件后,引入本文的javascript代码即可,直接定义了panel,window,dialog的onResize回调,所以请注意不要在别的地方覆盖;再结合前面的那篇文章就可以同时阻止拖动和调整大小造成这三个组件窗口越界的情况了。

效果演示:

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

更新日志:

请参照http://www.easyui.info/archives/689.html进行修改

目前有 10 条留言 其中:访客:5 条, 博主:3 条 引用: 2

  1. feng : 2013年10月20日17:55:38  -49楼 @回复 回复

    我用了这个,但是我用的easyui是1.3.3的,左右、上都不会越界,但是下面就会越界,不知道这个怎么改? 😛

  2. Moriarty : 2014年01月24日10:38:58  -48楼 @回复 回复

    博主你好,我用了你的代码。
    其他没改。但是当我把
    $(this).panel(‘resize’, {
    height : parentObj.height() – top – 1
    });
    改成这样
    $(this).panel(‘resize’, {
    height : parentObj.height() – 1,
    top : 1
    });
    浏览器就崩溃了。
    我不太明白,还请博主解答。


    • 管理员
      世纪之光 : 2014年01月24日16:48:46  地下1层 @回复 回复

      这个有更新,请参照http://www.easyui.info/archives/689.html这篇去修改。

  3. 461619126 : 2014年10月22日11:57:31  -47楼 @回复 回复

    我想问一下,当body设置属性overflow:hidden的时候,combobox的下拉看不到了怎么解决呢?大神请回复我QQ461619126,很想学习

给我留言

留言无头像?


×