第二百零三节，jQuery EasyUI，Window(窗口)组件
jQuery EasyUI，Window(窗口)组件
学习要点：
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法，这个组件依赖于 Panel（面 板）组件、resizable(调整大小)和 draggable(拖动)组件。这个组件扩展与 Panel 组件， 最大的优势就是调整大小和拖动以及内部布局。
一．加载方式
class 加载方式
<div id="box" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true"> 窗口 </div>
window()让一个元素，执行窗口方法
JS 加载调用
$(function () { $('#box').window({ width: 600, height: 400, modal: true }); });
二．属性列表
窗口属性扩展自 Panel(面板)，窗口新增或重新定义的属性如下：
title string 窗口的标题文本。默认值为“New Window”。
$(function () { $('#box').window({ title:'窗口标题', //窗口的标题文本。默认值为“New Window”。 }); });
collapsible boolean 定义是否显示可折叠按钮。默认值为 true。
$(function () { $('#box').window({ title:'窗口标题', //窗口的标题文本。默认值为“New Window”。 collapsible:false //定义是否显示可折叠按钮。默认值为 true。 }); });
minimizable boolean 定义是否显示最小化按钮。默认值为 true。
$(function () { $('#box').window({ title:'窗口标题', //窗口的标题文本。默认值为“New Window”。 collapsible:false, //定义是否显示可折叠按钮。默认值为 true。 minimizable:false //定义是否显示最小化按钮。默认值为 true。 }); });
maximizable boolean 定义是否显示最大化按钮。默认值为 true。
$(function () { $('#box').window({ title:'窗口标题', //窗口的标题文本。默认值为“New Window”。 collapsible:false, //定义是否显示可折叠按钮。默认值为 true。 minimizable:false, //定义是否显示最小化按钮。默认值为 true。 maximizable:false //定义是否显示最大化按钮。默认值为 true。 }); });
closable boolean 定义是否显示关闭按钮。默认值为 true。
$(function () { $('#box').window({ title:'窗口标题', //窗口的标题文本。默认值为“New Window”。 collapsible:false, //定义是否显示可折叠按钮。默认值为 true。 minimizable:false, //定义是否显示最小化按钮。默认值为 true。 maximizable:false, //定义是否显示最大化按钮。默认值为 true。 closable:false //定义是否显示关闭按钮。默认值为 true。 }); });
closed boolean 定义是否可以关闭窗口。默认值为 false。
$(function () { $('#box').window({ title:'窗口标题', //窗口的标题文本。默认值为“New Window”。 collapsible:false, //定义是否显示可折叠按钮。默认值为 true。 minimizable:false, //定义是否显示最小化按钮。默认值为 true。 maximizable:false, //定义是否显示最大化按钮。默认值为 true。 closable:false, //定义是否显示关闭按钮。默认值为 true。 closed:true //定义是否关闭窗口。默认值为 false。 }); });
zIndex number 窗口 Z 轴坐标。默认值为9000。也就是外层等级，设置层级关系
$(function () { $('#box').window({ title:'窗口标题', //窗口的标题文本。默认值为“New Window”。 zIndex:99999 //窗口 Z 轴坐标。默认值为9000。也就是外层等级，设置层级关系 }); });
draggable boolean 定义是否能够拖拽窗口。默认值为 true。
$(function () { $('#box').window({ title:'窗口标题', //窗口的标题文本。默认值为“New Window”。 zIndex:99999, //窗口 Z 轴坐标。默认值为9000。也就是外层等级，设置层级关系 draggable:false //定义是否能够拖拽窗口。默认值为 true。 }); });
resizable boolean 定义是否能够改变窗口大小。默认值为true。
$(function () { $('#box').window({ title:'窗口标题', //窗口的标题文本。默认值为“New Window”。 zIndex:99999, //窗口 Z 轴坐标。默认值为9000。也就是外层等级，设置层级关系 draggable:false, //定义是否能够拖拽窗口。默认值为 true。 resizable:false //定义是否能够改变窗口大小。默认值为true。 }); });
shadow boolean 如果设置为 true，在窗体显示的时候显示阴影。默认值为 true。
$(function () { $('#box').window({ width: 600, height: 400, title:'窗口标题', //窗口的标题文本。默认值为“New Window”。 zIndex:99999, //窗口 Z 轴坐标。默认值为9000。也就是外层等级，设置层级关系 draggable:false, //定义是否能够拖拽窗口。默认值为 true。 resizable:false, //定义是否能够改变窗口大小。默认值为true。 shadow:false //如果设置为 true，在窗体显示的时候显示阴影。默认值为 true。 }); });
inline boolean定义如何布局窗口，如果设置为 true，窗口将显示在它的父容器中，否则将显示在所有元素的上面。默认值为 false。
$(function () { $('#box').window({ width: 400, height: 200, title:'窗口标题', //窗口的标题文本。默认值为“New Window”。 zIndex:99999, //窗口 Z 轴坐标。默认值为9000。也就是外层等级，设置层级关系 draggable:false, //定义是否能够拖拽窗口。默认值为 true。 resizable:false, //定义是否能够改变窗口大小。默认值为true。 shadow:false, //如果设置为 true，在窗体显示的时候显示阴影。默认值为 true。 inline:false //定义如何布局窗口，如果设置为 true，窗口将显示在它的父容器中，否则将显示在所有元素的上面。默认值为 false。 }); });
modal boolean 定义是否将窗体显示为模式化窗口。默认值为 true。是否显示遮罩
$(function () { $('#box').window({ width: 400, height: 200, title:'窗口标题', //窗口的标题文本。默认值为“New Window”。 zIndex:99999, //窗口 Z 轴坐标。默认值为9000。也就是外层等级，设置层级关系 draggable:false, //定义是否能够拖拽窗口。默认值为 true。 resizable:false, //定义是否能够改变窗口大小。默认值为true。 shadow:false, //如果设置为 true，在窗体显示的时候显示阴影。默认值为 true。 inline:false, //定义如何布局窗口，如果设置为 true，窗口将显示在它的父容器中，否则将显示在所有元素的上面。默认值为 false。 modal:true //定义是否将窗体显示为模式化窗口。默认值为 true。是否显示遮罩 }); });
还有其他属性可以用Panel(面板)的属性，因为他继承Panel(面板)
PS：以上属性是 Window 自行扩展或代替 Panel 的属性，本身 Window 就是依赖于 Panel 的。所以，上面没有涉及到的属性，请查看 Panel 的属性即可。比如：
//这里的 fit 和 iconCls 来自 Panel 属性 $('#box').window({ width : 600, height : 400, modal : true, fit : true, iconCls : 'icon-add', });
三．事件列表
窗口的事件完整继承自 Panel(面板)。所以，直接参考 Panel 面板的事件即可。事件见Panel(面板)事件
如：
$(function () { $('#box').window({ width: 400, height: 200, title: '窗口标题', //窗口的标题文本。默认值为“New Window”。 onClose: function () { alert('关闭后触发！'); } }); });
四．方法列表
窗口的方法扩展自 Panel(面板)，窗口新增方法如下：
window none 返回外部窗口对象
$(function () { $('#box').window({ width: 400, height: 200, title: '窗口标题' //窗口的标题文本。默认值为“New Window”。 }); alert($('#box').window('window')); //返回外部窗口对象 });
hcenter none 仅水平居中窗口。当窗口位置发生改变时，将窗口重新仅水平居中窗口
$(function () { $('#box').window({ width: 400, height: 200, title: '窗口标题' //窗口的标题文本。默认值为“New Window”。 }); $('#box').window('hcenter'); //仅水平居中窗口。 });
//单击时调整位置 $(document).click(function () { $('#box').window('move', { left: 0, top: 0, }); }); //双击时恢复各种居中 $(document).dblclick(function () { //替换成 center 或 vcenter 亦可 $('#box').window('hcenter'); });
vcenter none 仅垂直居中窗口。当窗口位置发生改变时，将窗口重新仅垂直居中窗口
$(function () { $('#box').window({ width: 400, height: 200, title: '窗口标题' //窗口的标题文本。默认值为“New Window”。 }); $('#box').window('vcenter'); //当窗口位置发生改变时，将窗口重新仅垂直居中窗口 });
center none 将窗口绝对居中。当窗口位置发生改变时，将窗口重新绝对居中窗口
$(function () { $('#box').window({ width: 400, height: 200, title: '窗口标题' //窗口的标题文本。默认值为“New Window”。 }); $('#box').window('center'); //当窗口位置发生改变时，将窗口重新绝对居中窗口 });
其他方法见Panel(面板)的方法
使用$.fn.window.defaults 重写默认值对象。见前面的
window 组件最强大的地方就是可以内部布局和添加 linkbutton。 具体布局方法如下：
1.外部用 window 组件包裹一下；
2.内部用 layout 组件左右各分配一个，底部分配一个；
3.底部添加一个按钮即可。
<div class="easyui-window" style="width:400px;height:250px;"> <div class="easyui-layout" data-options="fit:true,"> <div data-options="region:'west',split:true," style="width:100px;">左边</div> <div data-options="region:'center'">内容</div> <div data-options="region:'south',border:false" style="height:40px;text-align:right;padding:5px 5px 0 0"> <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="width:80px;">确认</a> <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" style="width:80px;">取消</a> </div> </div> </div>
