/**
* @author 孙宇
*
* @requires jQuery,EasyUI
*
* 防止panel/window/dialog组件超出浏览器边界
* @param left
* @param top
*/
var easyuiPanelOnMove = function(left, top) {
var l = left;
var t = top;
if (l < 1) {
l = 1;
}
if (t < 1) {
t = 1;
}
var width = parseInt($(this).parent().css('width')) + 14;
var height = parseInt($(this).parent().css('height')) + 14;
var right = l + width;
var buttom = t + height;
var browserWidth = $(window).width();
var browserHeight = $(window).height();
if (right > browserWidth) {
l = browserWidth - width;
}
if (buttom > browserHeight) {
t = browserHeight - height;
}
$(this).parent().css({/* 修正面板位置 */
left : l,
top : t
});
};
$.fn.dialog.defaults.onMove = easyuiPanelOnMove;
$.fn.window.defaults.onMove = easyuiPanelOnMove;
$.fn.panel.defaults.onMove = easyuiPanelOnMove;
将代码放到easyui.min.js后面就行
分享到:
相关推荐
要防止 `window` 超出屏幕边界,我们需要在拖拽过程中监听窗口的位置,一旦检测到即将超出边界,就调整窗口的坐标使其保持在可视区域内。这可以通过自定义 `onDrag` 或 `onResize` 事件处理函数来实现。下面是一段...
easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。easyui是个...
孙宇的jsutils,包含一些常用的js的工具.easyui 扩展 数据平滑、防止panel/window/dialog组件超出浏览器边界、panel关闭时回收内存、扩展datagrid,添加动态增加或删除Editor的方法、增加带复选框的下拉树、增加多选...
在EasyUI中,Panel是一个可自定义的容器,它可以包含其他组件或内容。Panel具有标题、边框、工具栏、内边距等多种特性,可以灵活地调整布局和样式。实现Panel的拖动功能,可以让用户自由地调整Panel的位置,提高其在...
在IT领域,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,如DataGrid、Dialog等,用于构建用户界面。本示例聚焦于如何在EasyUI中利用Dialog组件实现内容打印功能。以下是对这个主题的详细阐述: 首先,...
EasyUI是一个基于jQuery的UI框架,提供了丰富的组件,其中包括用于创建弹出窗口(window)的功能。在EasyUI中,我们可能会遇到需要在弹出窗口(子页面)与父页面之间进行数据传递或调用父页面方法的需求。下面将详细...
jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要...
EasyUI入门教程--第03课_parser组件panel组件及如何使用组件自带的属性、事件、方法.avi,这是由孙宇老师录制的视频,现在很难找了,讲得很详细,授人以鱼,不如授人以渔。 <br/> 第01课(大概介绍一下easyui,和组织...
easyui dialog和messager样式更改,默认样式太丑
在IT行业中,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,如DataGrid、Dialog等,使得开发者能够快速构建用户界面。本文将详细探讨如何利用EasyUI的Dialog组件来展示DataGrid的内容,并实现对其内容的...
根据提供的文件信息,本文将详细解释与“jQuery EasyUI”相关的知识,特别是“EasyLoader”组件的使用方法及其在实际项目中的应用场景。 ### jQuery EasyUI简介 jQuery EasyUI 是一个基于 jQuery 的用户界面插件...
使用easyUI在panel中创建复杂布局 使用easyUI创建折叠面板 使用easyUI创建Tabs标签 使用easyui创建tabs组件和动态添加 使用easyUI创建一个自动播放的tabs 使用easyUI创建XP风格左侧面板 DataGrid 使用...
本项目聚焦于EasyUI中的单选框和多选框组件,这两个组件在数据选择和用户交互方面扮演着重要角色。 标题中的“基于easyui的单选和多选框组件”指的是使用EasyUI库来实现的特定用户界面元素。EasyUI提供了丰富的组件...
EasyUI皮肤组件UI设计 这套easyui皮肤,用了扁平化的设计风格,在easyui官方最新版jQuery EasyUI 1.4.5的基础上重新设计所有组件,与easyui默认皮肤一样,可以很方便的进行替换设置,并且也可以很方便的对本套皮肤...
$('head').append('<link rel="stylesheet" type="text/css" href="path/to/easyui/themes/' + themeName + '/easyui.css"/>'+ '<link rel="stylesheet" type="text/css" href="path/to/easyui/themes/' + ...
EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件和插件,如对话框、表单、菜单、树形结构等,帮助开发者快速构建用户界面。在本压缩包中,包含的是三套精美的 EasyUI 皮肤,这些皮肤可以改变 ...
在EasyUI中,Dialog(对话框)是一个非常重要的组件,常用于展示弹出式窗口,如表单、提示信息等。在本篇文章中,我们将深入探讨EasyUI Dialog的使用方法和实例,帮助你更好地理解和应用这个功能强大的组件。 1. **...
easyui.js插件, <script type="text/javascript" src="/js/easyui.js"></script> <script type="text/javascript" src="/js/easyui-lang-zh_CN.js"></script>
EasyUI是一个轻量级的JavaScript框架,主要用于构建Web应用的用户界面,它基于jQuery,提供了丰富的组件和易用的API,使得开发者能够快速地创建出功能完备、界面友好的Web应用。 在描述中提到,InsdepTheme免费版是...