EasyUI框架的Dialog控件根据浏览器分辨率自动调节宽高

　 　如果单独一个或几个Dialog控件修改成根据浏览器可视界面自动调整高、宽很容易仅仅是一个量变的过程，但如果大量页面都引入了Dialog控件，修 改起来是一个很消耗体力的工作。所以接到任务后第一想法就是能不能使在“公共母板页”中设置一处而自动修改继承此母板页的子页面中的Dialog也实现此 功能。

0x01：

　　有了思路后第一部就是查找EasyUI的API，然后没有发现什么可用的事件。未果。

0x02：

　 　有时换一种思路便可豁然开朗。EasyUI框架通过插入新的DOM元素而取缔原有的DOM，这个时候便会触发DOM元素的变更事件。所以第一个切入点就 是找到事件。很显然“DOMNodeInserted”满足这个需求（PS：缺点就是每变更一个DOM元素都会触发此事件，不知会不会对客户端性能造成多 大的影响，但从实验结果来看并没有拖慢Dialog的显示）。

　 　有了事件后就需要找到触发此事件的“主角”，也就是那个Dialog触发的。通过审核元素可以发 现$('.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高度，如果在现代浏览器中除了代码看着比较繁琐外功能是可以实 现的。但有一个严重的BUG，就是在IE8及一下版本中不支持DomNodeInserted事件。Shit！当时一时手贱就用了mouseover事 件，功能在IE8及以下依然能实现，但是在IE“强大”的渲染能力下性能问题暴露了出来，画面一卡一卡的，快卡成电子狗了。所以唯一完美的方法只能修改源 码，索然引用的EasyUI文件中加入了代码混淆，但并没有对其进行压缩。除了变量命名变成了_Number外其他格式方面还是比较完美的。

    0x01：其实可以才想到源码是如何实现的，唯一麻烦的就是在这一陀字母中找到我想要的位置。首先第一个切入点就是找“Dialog”，搜索后可以看 到 var opts = $.data(_280, "dialog").options; 这句话，不用想就知道onOpen则藏在opts中，opts为一个对象则，再次全文搜索"opts.onOpen"，比较幸运全文只有两处匹配。通过排 查可以找到大约在3429行找到以下代码段：