Easyui 让Window弹出居中与最大化后居中
时间:2022-04-22
本文章向大家介绍Easyui 让Window弹出居中与最大化后居中,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
easyui1.3.2版本,window的弹出不会居中了。而dialog是会居中的,我们必须为为window的open事件做扩展
代码如下:只要加入以下代码即可.如果你是看了MVC项目系列的,把他放到jquery.easyui.plus.js里面就可以了
//让window居中
var easyuiPanelOnOpen = function (left, top) {
var iframeWidth = $(this).parent().parent().width();
var iframeHeight = $(this).parent().parent().height();
var windowWidth = $(this).parent().width();
var windowHeight = $(this).parent().height();
var setWidth = (iframeWidth - windowWidth) / 2;
var setHeight = (iframeHeight - windowHeight) / 2;
$(this).parent().css({/* 修正面板位置 */
left: setWidth,
top: setHeight
});
if (iframeHeight < windowHeight)
{
$(this).parent().css({/* 修正面板位置 */
left: setWidth,
top: 0
});
}
$(".window-shadow").hide();
};
$.fn.window.defaults.onOpen = easyuiPanelOnOpen;
完美居中。
点击最大化后,再次最小化时也会出现不居中现象,我们必须,扩展resize事件。
var easyuiPanelOnResize = function (left, top) {
var iframeWidth = $(this).parent().parent().width();
var iframeHeight = $(this).parent().parent().height();
var windowWidth = $(this).parent().width();
var windowHeight = $(this).parent().height();
var setWidth = (iframeWidth - windowWidth) / 2;
var setHeight = (iframeHeight - windowHeight) / 2;
$(this).parent().css({/* 修正面板位置 */
left: setWidth-6,
top: setHeight-6
});
if (iframeHeight < windowHeight) {
$(this).parent().css({/* 修正面板位置 */
left: setWidth,
top: 0
});
}
$(".window-shadow").hide();
//$(".window-mask").hide().width(1).height(3000).show();
};
$.fn.window.defaults.onResize = easyuiPanelOnResize;
window组件可以兼容了
- MySQL备份恢复第二篇(r5笔记第6天)
- SpringMVC 中配置 Swagger 插件.
- MySQL和Oracle对比学习之事务(r5笔记第4天)
- 【面试宝典】Java如何打印数组
- MySQL数据导入导出牛刀小试(r5笔记第3天)
- SpringMVC 异常处理.
- 一条简单的sql在11g和12c中的不同(r5笔记第2天)
- 浅析 SpringMVC 原理和配置.
- 使用impdp不当导致的数据丢失问题(r5笔记第1天)
- MySQL数据库 Event 定时执行任务.
- Tomcat 日志分割.
- crontab导致的频繁发送邮件的问题(r5笔记第20天)
- 再学习之Spring(依赖注入).
- 使用序列的问题ORA-02287(r5笔记第19天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 什么是python的必选参数
- python进程与线程小结实例分析
- PHP集成环境XAMPP的安装与配置
- Python socket服务常用操作代码实例
- Python select及selectors模块概念用法详解
- keras使用Sequence类调用大规模数据集进行训练的实现
- python的json包位置及用法总结
- 如何优雅的使用 laravel 的 validator验证方法
- phpMyAdmin通过密码漏洞留后门文件
- laravel中的一些简单实用功能
- PHP 获取客户端 IP 地址的方法实例代码
- 优秀开源AI框架推荐
- python中常见错误及解决方法
- tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
- Python如何实现后端自定义认证并实现多条件登陆