zoukankan      html  css  js  c++  java
  • 【JavaScript】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单独进行设置了

     1 $(document).ready(function () {
     2     $('.panel.window').bind('DOMNodeInserted', function (e) {
     3         //var vHeight = $(window.parent).height();
     4         var vHeight = window.innerHeight;
     5         var vWidth = window.innerWidth;
     6 
     7         if ($('.panel.window:visible').length > 0) {
     8             var t = $(e.currentTarget).find('.easyui-dialog.panel-body.panel-body-noborder.window-body');
     9             var vDialogHeight = $('.panel.window:visible').css('height');
    10             var vDialogWidth = $('.panel.window:visible').css('width');
    11 
    12             vDialogHeight = parseInt(vDialogHeight.replace('px', '')) + 50;
    13             vDialogWidth = parseInt(vDialogWidth.replace('px', ''));
    14             /* 如果Dialog高度大于等于当前可视高度,则设置Dialog距离上边距50px */
    15             if (vHeight <= vDialogHeight) {
    16                 t.dialog('resize', {
    17                     height: vHeight - 100
    18                 });
    19             }
    20             /* 如果Dialog宽度大于当前可视宽度,则设置Dialog距离左边距15px否则设置左右居中 */
    21             if (vWidth <= vDialogWidth) {
    22                 t.dialog('move', { left: 15 });
    23             } else {
    24                 t.dialog('move', { left: (vWidth - vDialogWidth) / 2 });
    25             }
    26             /* 设置Dialog垂直居中 */
    27             t.dialog('move', { top: (vHeight - vDialogHeight + 50) / 2 });
    28         }
    29     });
    30 });
    Dialog Code
  • 相关阅读:
    基于C#.NET C/S架构的生产看板管理系统软件开发框架平台
    VS.NET后端框架,C#.NET开发的服务器端开发框架
    开源.NET开发架构.NET管理系统框架-原创作品
    开源.NET开发架构 .NET管理系统框架
    基于MVC架构的WebApi服务端开发框架核心优势|C/S框架网原创作品
    基于C#.NET三层架构物流运输管理系统(TMS)-C/S框架网原创作品
    C#Winform+SQL开发的基于C/S架构大型ERP系统
    MES系统框架及MES开源框架|C/S框架网软著产品
    C#.NET程序升级框架之软件版本自动升级系统
    原创C/S应用程序开发平台与.NET快速开发框架
  • 原文地址:https://www.cnblogs.com/MangoCai/p/5614371.html
Copyright © 2011-2022 走看看