2014年8月30日 3233次浏览

相信很多前端朋友都用过jqueryeasyUI,jqueryeasyUI功能很强大，可以实现我们前端很多想要的效果，例如，下拉树也就是select tree等。但是jqueryeasyUI底层构建不是很好，简单的应用还可以，深入开发的话，还是推荐用extjs相对好一些！

今天的这篇文章，主要是解决我很久很久之前遇到的一个问题，今天重新在博客上发一遍，就是jqueryeasyUI 的dialog，要是你用jqueryeasyUI dialog的时候，你一不小心拖动，就会把dialog拖到windows窗体外面，没有了关闭按钮，导致dialog不能关闭。

针对这个问题，解决方法很简单，你只要在你的jqueryeasyUI之后，引进一个js就可以了，那这个js代码如下：

/**

 * add by cgh

 * 针对panel window dialog三个组件拖动时会超出父级元素的修正

 * 如果父级元素的overflow属性为hidden，则修复上下左右个方向

 * 如果父级元素的overflow属性为非hidden，则只修复上左两个方向

 * @param left

 * @param top

 * @returns

 */

var easyuiPanelOnMove = function(left, top) {

var parentObj = $(this).panel('panel').parent();

if (left < 0) {

$(this).window('move', {

left : 1

});

}

if (top < 0) {

$(this).window('move', {

top : 1

});

}

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(parentObj.css("overflow")=="hidden"){

if(left > parentWidth-width){

$(this).window('move', {

"left":parentWidth-width

});

}

if(top > parentHeight-height){

$(this).window('move', {

"top":parentHeight-height

});

}

}

};

$.fn.panel.defaults.onMove = easyuiPanelOnMove;

$.fn.window.defaults.onMove = easyuiPanelOnMove;

$.fn.dialog.defaults.onMove = easyuiPanelOnMove;

将代码保存，引用即可，你看看，是不是问题解决了？