標題: EasyUI框架的Dialog控件根據(jù)瀏覽器分辨率自動調節(jié)寬高 [打印本頁]
作者: heicad    時間: 2016-8-12 15:42
標題: EasyUI框架的Dialog控件根據(jù)瀏覽器分辨率自動調節(jié)寬高
 序：

　 　如果單獨一個或幾個Dialog控件修改成根據(jù)瀏覽器可視界面自動調整高、寬很容易僅僅是一個量變的過程，但如果大量頁面都引入了Dialog控件，修 改起來是一個很消耗體力的工作。所以接到任務后第一想法就是能不能使在“公共母板頁”中設置一處而自動修改繼承此母板頁的子頁面中的Dialog也實現(xiàn)此 功能。

 

0x01：

　　有了思路后第一部就是查找EasyUI的API，然后沒有發(fā)現(xiàn)什么可用的事件。未果。

 

0x02：

　 　有時換一種思路便可豁然開朗。EasyUI框架通過插入新的DOM元素而取締原有的DOM，這個時候便會觸發(fā)DOM元素的變更事件。所以第一個切入點就 是找到事件。很顯然“DOMNodeInserted”滿足這個需求（PS：缺點就是每變更一個DOM元素都會觸發(fā)此事件，不知會不會對客戶端性能造成多 大的影響，但從實驗結果來看并沒有拖慢Dialog的顯示）。

　 　有了事件后就需要找到觸發(fā)此事件的“主角”，也就是那個Dialog觸發(fā)的。通過審核元素可以發(fā) 現(xiàn)$('.panel.window:visible')此對象便是Dialog，e.currentTarget則是這個Dialog的DOM對象。所 以在此事件中判斷顯示的Dialog是否大于0（$('.panel.window:visible').length > 0），如果大于則用當前瀏覽器可視高，寬大于此Dialog的高、寬則進行設置。設置后還需要對位置進行移動。這些就可以簡單批量處理Dialog高度自 動調整了。無需每個Dialog單獨進行設置了

 $(document).ready(function () {

    $('.panel.window').bind('DOMNodeInserted', function (e) {

        //var vHeight = $(window.parent).height();

        var vHeight = window.innerHeight;

        var vWidth = window.innerWidth;


        if ($('.panel.window:visible').length > 0) {

            var t = $(e.currentTarget).find('.easyui-dialog.panel-body.panel-body-noborder.window-body');

            var vDialogHeight = $('.panel.window:visible').css('height');

            var vDialogWidth = $('.panel.window:visible').css('width');


            vDialogHeight = parseInt(vDialogHeight.replace('px', '')) + 50;

            vDialogWidth = parseInt(vDialogWidth.replace('px', ''));

            /* 如果Dialog高度大于等于當前可視高度，則設置Dialog距離上邊距50px */

            if (vHeight <= vDialogHeight) {

                t.dialog('resize', {

                    height: vHeight - 100

                });

            }

            /* 如果Dialog寬度大于當前可視寬度，則設置Dialog距離左邊距15px否則設置左右居中 */

            if (vWidth <= vDialogWidth) {

                t.dialog('move', { left: 15 });

            } else {

                t.dialog('move', { left: (vWidth - vDialogWidth) / 2 });

            }

            /* 設置Dialog垂直居中 */

            t.dialog('move', { top: (vHeight - vDialogHeight + 50) / 2 });

        }

    });

});


-------------------------------



    序：即上一篇通過DomNodeInserted事件來自適應EasyUI中的Dialog高度，如果在現(xiàn)代瀏覽器中除了代碼看著比較繁瑣外功能是可以實 現(xiàn)的。但有一個嚴重的BUG，就是在IE8及一下版本中不支持DomNodeInserted事件。Shit！當時一時手賤就用了mouseover事 件，功能在IE8及以下依然能實現(xiàn)，但是在IE“強大”的渲染能力下性能問題暴露了出來，畫面一卡一卡的，快卡成電子狗了。所以唯一完美的方法只能修改源 碼，索然引用的EasyUI文件中加入了代碼混淆，但并沒有對其進行壓縮。除了變量命名變成了_Number外其他格式方面還是比較完美的。

    0x01：其實可以才想到源碼是如何實現(xiàn)的，唯一麻煩的就是在這一陀字母中找到我想要的位置。首先第一個切入點就是找“Dialog”，搜索后可以看 到 var opts = $.data(_280, "dialog").options; 這句話，不用想就知道onOpen則藏在opts中，opts為一個對象則，再次全文搜索"opts.onOpen"，比較幸運全文只有兩處匹配。通過排 查可以找到大約在3429行找到以下代碼段：

onOpen: function () {
    if (_26f.mask) {
        _26f.mask.css({ display: "block", zIndex: $.fn.window.defaults.zIndex++ });
    }
    if (_26f.shadow) {
        _26f.shadow.css({ display: "block", zIndex: $.fn.window.defaults.zIndex++, left: opts.left, top: opts.top, width:
        _26f.window._outerWidth(), height: _26f.window._outerHeight() });
    }
    _26f.window.css("z-index", $.fn.window.defaults.zIndex++);
    opts.onOpen.call(_26e);
}

     0x02：比較容易，然后就是在opts.onOpen.call(_26e);前添加上我們的邏輯判斷語句就可以了。如：
if (_26f != null && $(_26f) != null && $(_26f).length > 0 && $(_26f)[0].options != null) {
    var dW = $(_26f)[0].options.width;
    var dH = $(_26f)[0].options.height;
    if (dH != null && dH != 'auto') {
        var vHeight = $(window).height(); // window.innerHeight;IE8不支持
        var vWidth = $(window).width(); // window.innerWidth;IE8不支持

        var vT = $(_26f)[0].options.top;
        var vL = $(_26f)[0].options.left;
        var t = $('#' + $(_26f)[0].options.id);

        /* 如果Dialog高度大于等于當前可視高度，則設置Dialog距離上邊距50px */
        if (vHeight <= dH) {
            t.dialog('resize', {
                height: vHeight - 100
            });
        }

        /* 如果Dialog寬度大于當前可視寬度，則設置Dialog距離左邊距15px否則設置左右居中 */
        if (vWidth <= dW) {
            t.dialog('move', { left: 15 });
        } else {
            t.dialog('move', { left: (vWidth - dW) / 2 });
        }
        /* 設置Dialog垂直居中 */
        if (vT <= 0) {
            t.dialog('move', { top: 50 });
        } else {
            t.dialog('move', { top: Math.abs(vHeight - dH) / 2 });
        }
    }
}
/*--------- Dialog高度自適應End By:Clown(2016-07-18) ---------*/

    0x03：還沒怎么測試，明天再說吧。。。




歡迎光臨 (http://www.torrancerestoration.com/bbs/) Powered by Discuz! X3.1