来自： http://www.cnblogs.com/szytwo/archive/2012/08/28/2659917.html
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: 新面板的顶部位置 |
