序:

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

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

  1. xtratabcontrol控件的标签样式--文本的宽高

    Skin skin_ = TabSkins.GetSkin(DevExpress.LookAndFeel.UserLookAndFeel.Default.ActiveLookAndFeel); Ski ...

  2. Lodop打印控件中PRINT_INITA()和PRINT_PAGESIZE()宽高

    Lodop中有两个初始化语句,PRINT_INIT()和PRINT_INITA(),PRINT_INITA()多了四个参数,前两个是整体偏移值,第三四参数是宽高,这个宽高是指打印设计可视化编辑区域的宽 ...

  3. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件

    习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...

  4. 开源框架之TAB控件

    我的开源框架之TAB控件   需求 (1)支持iframe.html.json格式的tab内容远程请求 (2)支持动态添加tab (3)支持远程加载完成监听,支持tab激活事件监听 (4)支持relo ...

  5. easyui中tree型控件不正常显示的处理方法

    我在使用easyui中的tree控件时,出现不正常显示的现象,比如li中不能使用自定义的图标.父级展开或关闭时,其子级仍然显现并出现重叠等.找了很多资料,都没解决这个问题,后来逐个对照官方的源码,才找 ...

  6. 给easyui datebox时间框控件扩展一个清空的实例

    给easyui datebox扩展一个清空的实例 步骤一:拓展插件 /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; ( ...

  7. 精通 WPF UI Virtualization (提升 OEA 框架中 TreeGrid 控件的性能)

    原文:精通 WPF UI Virtualization (提升 OEA 框架中 TreeGrid 控件的性能) 本篇博客主要说明如何使用 UI Virtualization(以下简称为 UIV) 来提 ...

  8. zui框架配置日期控件只显示年月

    zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jqu ...

  9. Nova PhoneGap框架 第九章 控件

    我们的框架中也提供了一些常用的控件,这些控件大多都依赖于我们的框架,也正是在我们的框架下才使得实现这些控件的变得更简单.但是我们的框架是不依赖与这些控件的,如果你用不上这些控件,你完全可以把相关的代码 ...

随机推荐

  1. 基于Typecho CMS框架开发大中型应用

    基于Typecho CMS框架开发大中型应用 大中型应用暂且定义为:大于等于3个数据表的应用!汗吧! Typecho原本是一款博客系统,其框架体系有别于市面上一般意义MVC框架,主体代码以自创的Wid ...

  2. vim快捷键整理(转载)

    一.移动光标 1.左移h.右移l.下移j.上移k2.向下翻页ctrl + f,向上翻页ctrl + b3.向下翻半页ctrl + d,向上翻半页ctrl + u4.移动到行尾$,移动到行首0(数字), ...

  3. 泛函编程(28)-粗俗浅解:Functor, Applicative, Monad

    经过了一段时间的泛函编程讨论,始终没能实实在在的明确到底泛函编程有什么区别和特点:我是指在现实编程的情况下所谓的泛函编程到底如何特别.我们已经习惯了传统的行令式编程(imperative progra ...

  4. Greenplum(GP)常见问题,注意事项

    1.在安装过程中,出现的 source /usr/local/greenplum-db/greenplum_path.sh 不要写到profile或者./bashrc文件中 因为该句会导致python ...

  5. mongodb命令使用大全(常用命令)

    数据库常用命令 1.Help查看命令提示 help db.help(); db.yourColl.help(); db.youColl.find().help(); rs.help(); 2.切换/创 ...

  6. java集合-Iterator迭代

    我们常常使用 JDK 提供的迭代接口进行 Java 集合的迭代. Iterator iterator = list.iterator(); while(iterator.hasNext()){ Str ...

  7. jdbc应用程序连接Oracle rac的URL写法:

    1.应用程序连接Oracle rac的URL写法: #Oracle(AMS) jdbc.driverClassName=oracle.jdbc.driver.OracleDriver jdbc.url ...

  8. 2013年最新流行的响应式 WordPress 主题【下篇】

    在这篇文章中,我们收集了一些在2013年发布的最好的免费的响应式 WordPress 主题.这些主题包括高级功能,如自定义模板.自定义窗口小部件.自定义菜单主题选项等.让我们来看看下面的清单,并希望你 ...

  9. 分享50款 Android 移动应用程序图标【上篇】

    在这个移动程序流行的时代,持续增长的应用程序经济充满了商业机遇.任何对应用程序设计感兴趣的人,将会喜欢上这里的50个独特的 Android 应用程序图标.这些例子中的图标能够让应用程序的设计更具吸引力 ...

  10. JS 事件代理

    事件处理器:onclick.onmouseover.... 在传统的事件处理中,你需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越 ...