JQuery代码
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: 新面板的顶部位置
|
分享到:
相关推荐
datagrid:修复在调用updateRow方法之后使用getChanges方法无法返回被更新的行的BUG; treegrid:修复在追加或插入新行的时候触发onLoadSuccess事件的BUG; tree:修复在追加或插入新节点的时候触发onLoadSuccess...
jQuery EasyUI 1.5.1版本更新内容:Bug(修复) datagrid:修复在调用“updateRow”方法之后选中和复选行标志丢失的问题; tabs:修复在调用“update”方法的时候导致标签栏工具错位的问题; window:修复在窗体高度...
jQuery EasyUI 1.4.3版本更新内容: Bug(修复) textbox:修复“setText”方法不接受值为0的问题; timespinner:修复在使用IE11时点击空文本框时出错的问题; tabs:修复“update”方法只能更新面板正文的问题...
将一些好用的API及其用法也更新到中文API中,这里我想说的是,有些API或许是因为不稳定、尚有BUG、未完全实现或者是未经过完整测试的,所以官方并未公布出来,因此我也不建议大家大面积的去使用,这样会带来很多不...
jQuery EasyUI 1.5.1版本更新内容: Bug(修复) datagrid:修复在调用“updateRow”方法之后选中和复选行标志丢失的问题; tabs:修复在调用“update”方法的时候导致标签栏工具错位的问题; window:修复在...
数据表格处理海量数据方法 窗口应用 创建简单窗口 创建窗口工具栏 窗口与布局 创建对话框窗口 自定义工具条和按钮 树形菜单 使用标签创建树形菜单 创建异步树形菜单 添加树形菜单结点 创建带...
于是想到了是jquery-easyui 对界面的"渲染"不正确引起. 起初以为是因为加了 处理重复的代码引起,但是去掉后总是依旧: 进而考虑到界面"渲染"的前后关系,于是尝试对代码片段进行延迟执行,问题解决.原问题...
最近我在做一个安全监测系统,选择了用easyui进行搭建,easyui是一种基于jQuery的用户界面插件集合。使用easyui可以省去很多代码,功能上需要加一些样式。下面小编给大家介绍下给Easyui-Datebox设置隐藏或者不可用的...
在使用dialog插件时,默认是屏幕居中的,但是当页面出现滚动条时,dialog并没有随着滚动条往下滚动,这时就需要用户滑动滚动条来定位dialog,这不人性化,在说出解决方案前先来普及一下jquery关于定位的几个方法 ...
依赖 window linkbutton 用法 代码如下: ”dd” title=”My xss=removed> Dialog Content. </div> 代码如下: $(‘#dd’).dialog({ modal:true }); 特性 其特性扩展自 window,下列是为 dialog 重写的特性。 ...
6.5.2.14.1 基于JQuery EasyUI的日期选择组件 139 6.5.2.14.2 My97DatePicker 142 6.5.2.15 TimeSpinner 146 6.5.2.15.1 效果 146 6.5.2.15.2 应用 147 6.5.2.16 NumberSpinner 148 6.5.2.16.1 效果 148 6.5.2.17 ...