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

0x01：

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

0x02：

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

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

 $(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高度大于等于當(dāng)前可視高度，則設(shè)置Dialog距離上邊距50px */

            if (vHeight <= vDialogHeight) {

                t.dialog('resize', {

                    height: vHeight - 100

                });

            }

            /* 如果Dialog寬度大于當(dāng)前可視寬度，則設(shè)置Dialog距離左邊距15px否則設(shè)置左右居中 */

            if (vWidth <= vDialogWidth) {

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

            } else {

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

            }

            /* 設(shè)置Dialog垂直居中 */

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

        }

    });

});

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

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

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