jquery easyui window 打开后移动位置在打开后不居中问题解决
2011-07-28 10:14
363 查看
打开后移动位置在打开后不居中问题解决方法就很简单了,我们在打开时设置下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私有的属性:
Window也重写了Panel里的一些属性
事件
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 |
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
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 window 打开后移动位置在打开后不居中有关问题解决
- jquery easyui window 打开后移动位置在打开后不居中问题解决
- 解决jQuery的EasyUI的datagrid数据表格中行的垂直居中问题。
- jquery easyui window 不居中有关问题解决方案 (注意红色字体部分)
- easyui中的window打开大小、位置问题
- 解决jQuery的EasyUI的datagrid数据表格中行的垂直居中问题
- 解决jQuery的EasyUI的datagrid数据表格中行的垂直居中问题。
- 解决android7.0上某些PopuWindow显示位置不正确的问题
- jquery easyui window 的使用跟缓存问题
- 2009-12-22 11:29 解决 jQuery 实现父窗口的问题 如window.parent.document.getElementById().innerHTML
- 解决easyui jQuery JS的for循环调用ajax异步问题
- EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
- Android第三方框架开发之niftydialogeffects二次打开报错问题Unable to add window 。。is not valid; is your activity run解决
- jquery easyui window中的datagrid,只能显示一次问题
- 解决popup不随着window一起移动的问题
- 2009-12-22 11:29 解决 jQuery 实现父窗口的问题 如window.parent.document.getElementById().innerHTML
- WPF WebBrowser 使用window.open()打开 新窗口相关问题的解决
- window.parent.document解决原生js或jQuery 实现父窗口的问题
- 解决jquery-easyui1.3.3 combobox 多选模式不兼容IE8问题
- linux服务器上下载的csv文件在window环境下用excel打开的乱码问题解决