如果單獨(dú)一個(gè)或幾個(gè)Dialog控件修改成根據(jù)瀏覽器可視界面自動(dòng)調(diào)整高、寬很容易僅僅是一個(gè)量變的過程，但如果大量頁(yè)面都引入了Dialog控件，修 改起來(lái)是一個(gè)很消耗體力的工作。所以接到任務(wù)后第一想法就是能不能使在“公共母板頁(yè)”中設(shè)置一處而自動(dòng)修改繼承此母板頁(yè)的子頁(yè)面中的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é)果來(lái)看并沒有拖慢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)整了。無(wú)需每個(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事件來(lái)自適應(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)大”的渲染能力下性能問題暴露了出來(lái)，畫面一卡一卡的，快卡成電子狗了。所以唯一完美的方法只能修改源
碼，索然引用的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行找到以下代碼段：
| 歡迎光臨 (http://m.zg4o1577.cn/bbs/) | Powered by Discuz! X3.1 |