`
sphsyv23
  • 浏览: 84227 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

防止easyui的panel/window/dialog组件超出浏览器边界

阅读更多

 

/**
 * @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后面就行

分享到:
评论

相关推荐

    EasyUI防止window框拖拽出边界js代码

    要防止 `window` 超出屏幕边界,我们需要在拖拽过程中监听窗口的位置,一旦检测到即将超出边界,就调整窗口的坐标使其保持在可视区域内。这可以通过自定义 `onDrag` 或 `onResize` 事件处理函数来实现。下面是一段...

    jquery easyui api/demo

    easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。easyui是个...

    SyUtils.js

    孙宇的jsutils,包含一些常用的js的工具.easyui 扩展 数据平滑、防止panel/window/dialog组件超出浏览器边界、panel关闭时回收内存、扩展datagrid,添加动态增加或删除Editor的方法、增加带复选框的下拉树、增加多选...

    Easyui通过Dialog打印.rar

    在IT领域,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,如DataGrid、Dialog等,用于构建用户界面。本示例聚焦于如何在EasyUI中利用Dialog组件实现内容打印功能。以下是对这个主题的详细阐述: 首先,...

    easyui源码/包含css2.0/CSS3相关手册/jQueryAPI

    jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要...

    (可行)easyui 实现 panel 拖动效果

    在EasyUI中,Panel是一个可自定义的容器,它可以包含其他组件或内容。Panel具有标题、边框、工具栏、内边距等多种特性,可以灵活地调整布局和样式。实现Panel的拖动功能,可以让用户自由地调整Panel的位置,提高其在...

    EasyUI入门教程--第03课_parser组件panel组件及如何使用组件自带的属性、事件、方法.avi

    EasyUI入门教程--第03课_parser组件panel组件及如何使用组件自带的属性、事件、方法.avi,这是由孙宇老师录制的视频,现在很难找了,讲得很详细,授人以鱼,不如授人以渔。 &lt;br/&gt; 第01课(大概介绍一下easyui,和组织...

    easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    EasyUI是一个基于jQuery的UI框架,提供了丰富的组件,其中包括用于创建弹出窗口(window)的功能。在EasyUI中,我们可能会遇到需要在弹出窗口(子页面)与父页面之间进行数据传递或调用父页面方法的需求。下面将详细...

    easyui dialog和messager样式更改

    easyui dialog和messager样式更改,默认样式太丑

    Easyui使用Dialog打印

    在IT行业中,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,如DataGrid、Dialog等,使得开发者能够快速构建用户界面。本文将详细探讨如何利用EasyUI的Dialog组件来展示DataGrid的内容,并实现对其内容的...

    jQuery EasyUI EasyUI 组件范例

    根据提供的文件信息,本文将详细解释与“jQuery EasyUI”相关的知识,特别是“EasyLoader”组件的使用方法及其在实际项目中的应用场景。 ### jQuery EasyUI简介 jQuery EasyUI 是一个基于 jQuery 的用户界面插件...

    EasyUI tutorial 中文版 chm

    使用easyUI在panel中创建复杂布局 使用easyUI创建折叠面板 使用easyUI创建Tabs标签 使用easyui创建tabs组件和动态添加 使用easyUI创建一个自动播放的tabs 使用easyUI创建XP风格左侧面板 DataGrid 使用...

    基于easyui的单选和多选框组件

    本项目聚焦于EasyUI中的单选框和多选框组件,这两个组件在数据选择和用户交互方面扮演着重要角色。 标题中的“基于easyui的单选和多选框组件”指的是使用EasyUI库来实现的特定用户界面元素。EasyUI提供了丰富的组件...

    easyui三套精美皮肤

    EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件和插件,如对话框、表单、菜单、树形结构等,帮助开发者快速构建用户界面。在本压缩包中,包含的是三套精美的 EasyUI 皮肤,这些皮肤可以改变 ...

    easyui皮肤组件

    $('head').append('&lt;link rel="stylesheet" type="text/css" href="path/to/easyui/themes/' + themeName + '/easyui.css"/&gt;'+ '&lt;link rel="stylesheet" type="text/css" href="path/to/easyui/themes/' + ...

    easyui-dialog实例

    在EasyUI中,Dialog(对话框)是一个非常重要的组件,常用于展示弹出式窗口,如表单、提示信息等。在本篇文章中,我们将深入探讨EasyUI Dialog的使用方法和实例,帮助你更好地理解和应用这个功能强大的组件。 1. **...

    easyui插件

    easyui.js插件, &lt;script type="text/javascript" src="/js/easyui.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="/js/easyui-lang-zh_CN.js"&gt;&lt;/script&gt;

    EasyUI InsdepTheme EasyUI的皮肤美化 免费版

    EasyUI是一个轻量级的JavaScript框架,主要用于构建Web应用的用户界面,它基于jQuery,提供了丰富的组件和易用的API,使得开发者能够快速地创建出功能完备、界面友好的Web应用。 在描述中提到,InsdepTheme免费版是...

    一头扎进EasyUI系列视频教程(40集)

    教程名称:一头扎进EasyUI系列视频教程(40集)课程目录:【】[一头扎进EasyUI]第1讲-panel组件【】[一头扎进EasyUI]第2讲-messager组件【】[一头扎进EasyUI]第3讲-datebox组件【】[一头扎进EasyUI]第4讲-...

Global site tag (gtag.js) - Google Analytics