开发项目之遇到eayui 中window panel 超过父页面的问题
来源:互联网 发布:mac任务栏图标太多 编辑:程序博客网 时间:2024/06/16 23:47
开发项目遇到了panel,dialog以及window组件在被拖动时,会超出浏览器边界而无法拖回的情况,不过仔细分析一下代码,对于右下两侧的重定位还是存在问题的,后来在网上找了一些,后来发现问题所在,并找到问题的解决方法,如下:
一、分析:
大家试一下就可以发现,当右侧和下侧超过浏览器边界时并不会自动回到边界点,主要是以下代码存在问题:
var width = $(this).panel('options').width;var right = left + width;var browserWidth = $(document).width();if (right > browserWidth) {$(this).window('move', {left: browserWidth - width});}
当窗口被拖出浏览器有边界时,$(document).width();会增大,增大的部分就是窗口超过浏览器窗口的部分,所以right > browserWidth条件永远无法满足。
如果我们在思考得多一点,其实对于panel,dialog,window三个组件,我们往往要求的并不是它不能超出浏览器界限,而是要求它不能超出父元素界限,而且当父元素的overflow不是hidden的时候,应该允许组件超出父元素右下侧,个人觉得这样更合理。
二,解决方式
将如下代码将js代码保存为windowAdapter.js文件,在jquery.easyui.min.js之后引入你保存的js文件即可。
/** * add by sht from Internet * 针对panel window dialog三个组件拖动时会超出父级元素的修正 * 如果父级元素的overflow属性为hidden,则修复上下左右个方向 * 如果父级元素的overflow属性为非hidden,则只修复上左两个方向 * @param left * @param top * @returns */var easyuiPanelOnMove = function(left, top) {var parentObj = $(this).panel('panel').parent();if (left < 0) {$(this).window('move', {left : 1});}if (top < 0) {$(this).window('move', {top : 1});}var width = $(this).panel('options').width;var height = $(this).panel('options').height;var right = left + width;var buttom = top + height;var parentWidth = parentObj.width();var parentHeight = parentObj.height();if(parentObj.css("overflow")=="hidden"){if(left > parentWidth-width){$(this).window('move', {"left":parentWidth-width});}if(top > parentHeight-height){$(this).window('move', {"top":parentHeight-height});}}};$.fn.panel.defaults.onMove = easyuiPanelOnMove;$.fn.window.defaults.onMove = easyuiPanelOnMove;$.fn.dialog.defaults.onMove = easyuiPanelOnMove;
0 0
- 开发项目之遇到eayui 中window panel 超过父页面的问题
- Eayui中遇到的一些问题
- 02-项目开发中遇到的问题之网页乱码
- Window Phone 开发 Panorama 控件学习中遇到的问题
- 项目开发过程中遇到的问题
- 项目开发中遇到的问题!
- 项目开发中遇到的问题
- 项目开发中遇到过的问题
- 项目开发中遇到的一些问题--登录时跳转原页面
- 项目中遇到的一个js页面加载问题
- 项目开发、项目管理中遇到的问题总结
- Extjs window创建中遇到的问题
- 项目开发中经常遇到的一些问题总结
- 近期开发项目中遇到的问题,并总结
- Thinkphp开发项目过程中遇到的问题及解决
- YII框架开发项目中遇到的问题及解决办法
- 实际项目开发中遇到的问题及解决办法
- 项目开发中遇到的一些问题纪录
- Java中的I/O流及利用I/O流实现文件复制功能
- SET NEWNAME FOR DATABASE TO恢复数据库
- [读书笔记]30 天自制操作系统 day2 汇编语言学习与Makefile入门
- 初入MVP框架
- 如何关闭html页面上的iframe页面
- 开发项目之遇到eayui 中window panel 超过父页面的问题
- iOS 导航栏的那些事儿
- 用过滤器 +Session 会话权限控制详解
- Android 系统自动重启Bug(高通平台)
- win7 64位 plsql “无法解析指定的连接标识符”
- Dijkstra与spfa模板
- LeetCode 394. Decode String 题解
- 解决WordPress设置错误的url网站不能访问的问题
- 两不同服务器上的mysql跨库查询