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

时间：2024-01-17 12:27:44

序：

　　如果单独一个或几个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 });
         }
     });
 });

Dialog Code

相关文章