`
sphsyv23
  • 浏览: 84844 次
  • 性别: 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后面就行

分享到:
评论

相关推荐

    SyUtils.js

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

    jQuery_EasyUI中文帮助手册(带目录)

    EasyUI是一种基于jQuery的前端框架,它为开发人员提供了一套丰富的UI组件,以帮助快速构建现代化、交互式的Web应用。jQuery EasyUI中文帮助手册是一个全面的指导文档,它详细介绍了EasyUI框架的各种组件以及如何使用...

    jQuery EasyUI Dialog拖不下来如何解决

    在使用jQuery EasyUI框架开发Web前端时,Dialog组件是经常会用到的一个功能模块。Dialog组件用于创建弹出对话框,它可以帮助开发者实现页面内容的模态展示,操作的临时中断,或者用户信息的录入等。但是,有时候在...

    jquery+easyui文档

    接下来我们将继续探讨其他重要的 EasyUI 组件,如 Dialog(对话框)、Messager(提示框)、NumberBox(数字框)、ValidateBox(验证框)、Pagination(分页)、Window(窗口)、Panel(面板)、Tabs(标签)、Tree...

    jQuery_Easyui 教程

    除了上述介绍的Accordion、DateBox和ComboBox组件之外,jQuery EasyUI还提供了许多其他组件,例如: - **Dialog(对话框)**:用于创建弹出式对话框。 - **Messager(提示框)**:用于显示消息提示。 - **NumberBox...

    最新jquery+easyui_api培训文档

    &lt;div id="ww" class="easyui-window" data-options="title:'Window',collapsible:true,minimizable:true,maximizable:true,resizable:true"&gt; &lt;textarea class="easyui-textarea" style="width:100%;height:100px;...

    jqueryAPI教程

    &lt;div id="panel" class="easyui-panel" data-options="title:'Panel Title',iconCls:'icon-info',collapsible:true"&gt; &lt;div&gt;Panel Content...&lt;/div&gt; &lt;/div&gt; ``` #### 十一、Tabs(标签) **Tabs** 是一个包含多个...

    jquery+easyui培训文档 (20111111整理完善)

    我们将重点介绍几个关键的组件,包括Accordion(可折叠标签)、DateBox(日期框)、ComboBox(组合框)、Dialog(对话框)、Messager(提示框)、NumberBox(数字框)、ValidateBox(验证框)、Pagination(分页)、...

    jquery培训文档

    接下来,我们继续深入探讨其他 jQuery EasyUI 组件的使用方法和参数配置,包括 DateBox、ComboBox、Dialog 等。 #### DateBox(日期框) **DateBox** 组件允许用户选择或输入日期。它通常用于表单中的日期字段。 ...

Global site tag (gtag.js) - Google Analytics