打开后移动位置在打开后不居中问题解决方法就很简单了,我们在打开时设置下left和top属性就可以了
var $win;
$win = $('#test-window').window({
title:'添加课程设置信息',
width: 820,
height: 450,
top:($(window).height() - 820) * 0.5,
left:($(window).width() - 450) * 0.5,
shadow: true,
modal:true,
iconCls:'icon-add',
closed:true,
minimizable:false,
maximizable:false,
collapsible:false
});
$win.window('open');
HTML代码
<div id="test-window" class="easyui-window" title="Login" style="width:300px;height:180px;">
<div>
欢迎访问http://www.my400800.cn
</div>
<div style="padding:5px;text-align:center;">
<a href="#" class="easyui-linkbutton" icon="icon-ok">Ok</a>
<a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a>
</div>
</div>
属性及方法说明
Window需要依存于以下的三个组件:
* 可拖放(Draggable)
* 调整大小(Resizable)
* 面板(panel)
下面来介绍Window的具体用法,首先来看属性
大多数的属性和面板(panel)的属性是相同的,下面列出一些Window私有的属性:
属性名
类型
描述
默认值
zIndex |
数字 |
窗口的 z-index 属性,可以通过这个属性来增加 |
9000 |
draggable |
布尔 |
定义窗口是否可被拖动 |
true |
resizable |
布尔 |
定义窗口是否可以被改变大小 |
true |
shadow |
布尔 |
如果设置为true,窗口的阴影也将显示。 |
true |
modal |
布尔 |
定义窗口是否是一个模式窗口。 |
true |
Window也重写了Panel里的一些属性
属性名
类型
描述
默认值
title |
字符串 |
窗口的标题文本 |
New Window |
collapsible |
布尔 |
定义是否显示可折叠定义按钮 |
true |
minimizable |
布尔 |
定义是否显示最小化按钮 |
true |
maximizable |
布尔 |
定义是否显示最大化按钮 |
true |
closable |
布尔 |
定义是否显示关闭按钮 |
true |
事件
属性
名字
类型
描述
默认值
title |
字符串 |
在面板头部显示的标题文本 |
null |
iconCls |
字符串 |
一个CSS类来显示在面板中的16x16图标 |
null |
width |
数字 |
设置面板的宽度 |
auto |
height |
数字 |
设置面板的高度 |
auto |
left |
数字 |
设置面板左侧位置 |
null |
top |
数字 |
设置面板的顶部位置 |
null |
cls |
字符串 |
给面板添加一个CSS类 |
null |
headerCls |
字符串 |
给面板头部添加一个CSS类 |
null |
bodyCls |
字符串 |
给面板主体添加一个CSS类 |
null |
style |
对象 |
给面板自定义样式 |
{} |
fit |
布尔 |
当设置为true,面板尺寸将适合它的父容器。 |
false |
border |
布尔 |
定义面板的边框 |
true |
doSize |
布尔 |
当设置为true,面板载创建的时候将被调整和重新布局 |
true |
collapsible |
布尔 |
定义是否显示可折叠定义按钮 |
false |
minimizable |
布尔 |
定义是否显示最小化按钮 |
false |
maximizable |
布尔 |
定义是否显示最大化按钮 |
false |
closable |
布尔 |
定义是否显示关闭按钮 |
false |
tools |
数组 |
自定义工具,每个工具可以包含两个属性:iconCls and handler |
[] |
collapsed |
布尔 |
定义在初始化的时候折叠面板 |
false |
minimized |
布尔 |
定义在初始化的时候最小化面板 |
false |
maximized |
布尔 |
定义在初始化的时候最大化面板 |
false |
closed |
布尔 |
定义在初始化的时候关闭面板 |
false |
href |
字符串 |
一个远程的URL加载数据,然后显示在面板中 |
null |
loadingMessage |
字符串 |
当加载远程数据时,在面板中显示的信息 |
Loading… |
事件
名字
参数
描述
onLoad |
none |
当远程数据加载时触发 |
onBeforeOpen |
none |
当面板打开之前触发 |
onOpen |
none |
当面板打开之后触发 |
onBeforeClose |
none |
当面板关闭之前触发 |
onClose |
none |
当面板关闭之后触发 |
onBeforeDestroy |
none |
当面板销毁之前触发 |
onDestroy |
none |
当面板关闭之后触发 |
onBeforeCollpase |
none |
当面板折叠之前触发 |
onCollapse |
none |
当面板折叠之后触发 |
onBeforeExpand |
none |
当面板展开之前触发 |
onExpand |
none |
当面板展开之后触发 |
onResize |
width, height |
当面板调整大小之后触发
width: 新的宽度
height: 新的高度 |
onMove |
left,top |
当面板移动之后触发
left: 新的左侧位置
top: 新的顶部位置 |
onMaximize |
none |
当窗口最大化的时候被触发 |
onRestore |
none |
当窗口恢复到原来的大小时被触发 |
onMinimize |
none |
当窗口最小化的时候被触发 |
方法
名字
参数
描述
options |
none |
返回设置的属性值 |
panel |
none |
返回面板对象 |
header |
none |
返回面板头部对象 |
body |
none |
返回面板主体对象 |
setTitle |
title |
设置面板头部标题 |
open |
forceOpen |
当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数 |
close |
forceClose |
当forceClose设置为true,面板被关闭的时候忽略onBeforeClose 回调函数 |
destroy |
forceDestroy |
当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数 |
refresh |
none |
当设置了href值时,刷新面板来加载远程数据 |
resize |
options |
设置面板的大小和布局,这些选项包含以下的属性:
width: 新面板的宽度
height: 新面板的高度
left: 新面板的左侧位置
top: 新面板的顶部位置 |
move |
options |
移动面板到一个新的位置,这些选项包含以下属性:
left: 新面板的左侧位置
top: 新面板的顶部位置 |
分享到:
相关推荐
在jQuery EasyUI框架中,创建的对话框(dialog)通常会自动居中显示在屏幕上,但这仅限于页面没有出现滚动条的情况。一旦页面内容超出视口,出现滚动条,dialog就会保持在原始的居中位置,导致用户需要手动滚动页面...
通过监听window对象的scroll事件,当页面滚动时,自动调整Dialog的位置,确保Dialog在页面内容滚动后仍然位于可视区域的中心位置。具体实现方式是利用jQuery的dialog方法,并调用move方法来动态调整位置,这样Dialog...
在Jquery EasyUI中,实现弹出确认对话框和加载效果是前端开发中常见的交互需求,本文将详细介绍如何通过Jquery EasyUI实现这两种效果的示例代码。 首先,我们来探讨如何在Jquery EasyUI中弹出一个确认对话框。在Web...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列组件,帮助开发者快速构建用户界面。这个框架使用简单,功能丰富,适用于开发Web应用程序。以下是对标题和描述中提及的几个主要组件的详细解释: 1. **...
"火狐下easyui1.3.*弹出window框无法定位到中间问题解决"这个标题揭示了一个特定的技术难题,即使用EasyUI框架在Firefox浏览器下创建的弹窗窗口未能正确地居中显示,而在Internet Explorer和Chrome浏览器中却表现...