jqueryeasyUI dialog 弹出窗口超出浏览器
分类:实例代码
相信很多前端朋友都用过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;
将代码保存,引用即可。