panel,dialog,window元件越界(超出範圍)問題彙總

<a href="http://www.easyui.info/archives/689.html" target="_blank">參考位址</a>

原生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 = '&lt;!--[if gt IE ' + (++v) + ']&gt;&lt;i&gt;&lt;/i&gt;&lt;![endif]--&gt;', all[0]);   

    return v &gt; 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') &amp;&amp; !$.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 &gt; 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 &lt; 0) {   

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

                    left : 0   

                });   

    if ($(this).panel('panel').offset().top &lt; 0) {   

                    top : 0   

    if (left &lt; 0) {   

                }).panel('resize', {   

                    width : width + left   

    if (top &lt; 0) {   

                    height : height + top   

    if (parentObj.css("overflow") == "hidden") {   

        var inline = $.data(this, "window").options.inline;   

        if (inline == false) {   

            parentObj = $(window);   

        if ((width + left &gt; parentObj.width())   

                &amp;&amp; $(this).panel('options').reSizeNum &gt; 1) {   

            $(this).panel('resize', {   

                        width : parentObj.width() - left   

                    });   

        if ((height + top &gt; parentObj.height())   

                        height : parentObj.height() - top   

    $(this).panel('options').reSizing = false;   

};   

 * 針對panel window dialog三個元件拖動時會超出父級元素的修正  

 * @param left  

 * @param top  

var easyuiPanelOnMove = function(left, top) {   

    if ($(this).panel('options').reSizing)   

    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 &gt; parentObj.width() - width) {   

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

                        "left" : parentObj.width() - width   

        if (top &gt; parentObj.height() - height) {   

                        "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。

<a href="http://www.easyui.info/easyui/demo/window/062.html" target="_blank">http://www.easyui.info/easyui/demo/window/062.html</a>