EasyUI框架的Dialog控件根據(jù)瀏覽器分辨率自動調(diào)節(jié)寬高

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

0x01：

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

0x02：

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

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