jqueryeasyUI dialog 彈出視窗超出瀏覽器

相信很多前端朋友都用過jqueryeasyUI,jqueryeasyUI功能很強大，可以實現我們前端很多想要的效果。

例如，下拉樹也就是select tree等。但jqueryeasyUI底層構建不是很好，簡單應用還可以，深入開發的話，推薦extjs。

今天的這篇文章，主要是解決我很久很久之前遇到的一個問題，今天重新在部落格上發一遍，就是jqueryeasyUI 的dialog，要是你用jqueryeasyUI dialog的時候，你一不小心拖動，就會把dialog拖到windows窗體外面，沒有了關閉按鈕，導致dialog不能關閉。

針對這個問題，解決方法很簡單，只要在jqueryeasyUI之後，引進一個js就可以了，那這個js程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
/**
 * 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;

將程式碼儲存，引用即可。