【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单独进行设置了
$(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控件根据浏览器分辨率自动调节宽高的更多相关文章
- xtratabcontrol控件的标签样式--文本的宽高
Skin skin_ = TabSkins.GetSkin(DevExpress.LookAndFeel.UserLookAndFeel.Default.ActiveLookAndFeel); Ski ...
- Lodop打印控件中PRINT_INITA()和PRINT_PAGESIZE()宽高
Lodop中有两个初始化语句,PRINT_INIT()和PRINT_INITA(),PRINT_INITA()多了四个参数,前两个是整体偏移值,第三四参数是宽高,这个宽高是指打印设计可视化编辑区域的宽 ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件
习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...
- 开源框架之TAB控件
我的开源框架之TAB控件 需求 (1)支持iframe.html.json格式的tab内容远程请求 (2)支持动态添加tab (3)支持远程加载完成监听,支持tab激活事件监听 (4)支持relo ...
- easyui中tree型控件不正常显示的处理方法
我在使用easyui中的tree控件时,出现不正常显示的现象,比如li中不能使用自定义的图标.父级展开或关闭时,其子级仍然显现并出现重叠等.找了很多资料,都没解决这个问题,后来逐个对照官方的源码,才找 ...
- 给easyui datebox时间框控件扩展一个清空的实例
给easyui datebox扩展一个清空的实例 步骤一:拓展插件 /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; ( ...
- 精通 WPF UI Virtualization (提升 OEA 框架中 TreeGrid 控件的性能)
原文:精通 WPF UI Virtualization (提升 OEA 框架中 TreeGrid 控件的性能) 本篇博客主要说明如何使用 UI Virtualization(以下简称为 UIV) 来提 ...
- zui框架配置日期控件只显示年月
zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jqu ...
- Nova PhoneGap框架 第九章 控件
我们的框架中也提供了一些常用的控件,这些控件大多都依赖于我们的框架,也正是在我们的框架下才使得实现这些控件的变得更简单.但是我们的框架是不依赖与这些控件的,如果你用不上这些控件,你完全可以把相关的代码 ...
随机推荐
- 基于Typecho CMS框架开发大中型应用
基于Typecho CMS框架开发大中型应用 大中型应用暂且定义为:大于等于3个数据表的应用!汗吧! Typecho原本是一款博客系统,其框架体系有别于市面上一般意义MVC框架,主体代码以自创的Wid ...
- vim快捷键整理(转载)
一.移动光标 1.左移h.右移l.下移j.上移k2.向下翻页ctrl + f,向上翻页ctrl + b3.向下翻半页ctrl + d,向上翻半页ctrl + u4.移动到行尾$,移动到行首0(数字), ...
- 泛函编程(28)-粗俗浅解:Functor, Applicative, Monad
经过了一段时间的泛函编程讨论,始终没能实实在在的明确到底泛函编程有什么区别和特点:我是指在现实编程的情况下所谓的泛函编程到底如何特别.我们已经习惯了传统的行令式编程(imperative progra ...
- Greenplum(GP)常见问题,注意事项
1.在安装过程中,出现的 source /usr/local/greenplum-db/greenplum_path.sh 不要写到profile或者./bashrc文件中 因为该句会导致python ...
- mongodb命令使用大全(常用命令)
数据库常用命令 1.Help查看命令提示 help db.help(); db.yourColl.help(); db.youColl.find().help(); rs.help(); 2.切换/创 ...
- java集合-Iterator迭代
我们常常使用 JDK 提供的迭代接口进行 Java 集合的迭代. Iterator iterator = list.iterator(); while(iterator.hasNext()){ Str ...
- jdbc应用程序连接Oracle rac的URL写法:
1.应用程序连接Oracle rac的URL写法: #Oracle(AMS) jdbc.driverClassName=oracle.jdbc.driver.OracleDriver jdbc.url ...
- 2013年最新流行的响应式 WordPress 主题【下篇】
在这篇文章中,我们收集了一些在2013年发布的最好的免费的响应式 WordPress 主题.这些主题包括高级功能,如自定义模板.自定义窗口小部件.自定义菜单主题选项等.让我们来看看下面的清单,并希望你 ...
- 分享50款 Android 移动应用程序图标【上篇】
在这个移动程序流行的时代,持续增长的应用程序经济充满了商业机遇.任何对应用程序设计感兴趣的人,将会喜欢上这里的50个独特的 Android 应用程序图标.这些例子中的图标能够让应用程序的设计更具吸引力 ...
- JS 事件代理
事件处理器:onclick.onmouseover.... 在传统的事件处理中,你需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越 ...