>　这个组件依赖于 Panel（面板）组件、resizable(调整大小)和 draggable(拖动)组件。这个组件扩展与 Panel 组件，最大的优势就是调整大小和拖动以及内部布局。 # 加载方式 ## Class加载 ``` <div class="easyui-window" title="标题" data-options="iconCls:'icon-add',modal:true" style="height: 400px;width: 800px;"> </div> ``` ## JS调用加载 ``` <div id="box"> 内容 </div> <script> $(function () { $('#box').window({ width:600, height : 400, // 是否将窗体显示为模式化窗口 modal : true, // 窗口的标题文本 title : '标题', // 是否显示可折叠按钮 collapsible : false, // 是否显示最小化按钮 minimizable : false, // 是否显示最大化按钮 maximizable : false, // 是否显示关闭按钮 closable : false, // 是否可以关闭窗口 closed : false, // 窗口 Z 轴坐标 zIndex : 9999, // 是否能够拖拽窗口 draggable : false, // 否能够改变窗口大小 resizable : false, // 是否在窗口显示时显示阴影 shadow : false, // 定义如何布局窗口，如果设置为 true，窗口 // 将显示在它的父容器中，否则将显示在所有 //元素的上面。 inline : false, }) }) </script> ``` # 属性列表 | 属性名| 值 | 说明| | --- | --- | | title | string | 窗口的标题文本。默认值为“New Window”。| | collapsible | boolean | 定义是否显示可折叠按钮。默认值为 true。| | minimizable| boolean | 定义是否显示最小化按钮。默认值为 true。| | maximizable | boolean | 定义是否显示最大化按钮。默认值为 true。| | closable | boolean | 定义是否显示关闭按钮。默认值为 true。| | closed | boolean | 定义是否可以关闭窗口。默认值为 false。| | zIndex | number | 窗口 Z 轴坐标。默认值为9000。| | draggable | boolean | 定义是否能够拖拽窗口。默认值为 true。| | resizable | boolean| 定义是否能够改变窗口大小。默认值为true。| | shadow | boolean | 如果设置为 true，在窗体显示的时候显示阴影。默认值为 true。| | inline | boolean | 定义如何布局窗口，如果设置为 true，窗口将显示在它的父容器中，否则将显示在所有元素的上面。默认值为 false。| | modal | boolean | 定义是否将窗体显示为模式化窗口。默认值为 true。| *** ``` //配合 inline 属性的容器 <div style="position:relative; width:500px;height:300px;overflow:auto;border:1px solid #ccc;"> <div id="box">窗口</div> </div> ``` ``` //以上属性是Window自行扩展或代替Panel的属性，本身 Window就是依赖于 Panel //的。所以，上面没有涉及到的属性，请查看 Panel 的属性即可。比如： //这里的 fit 和 iconCls 来自 Panel 属性 $('#box').window({ width : 600, height : 400, modal : true, fit : true, iconCls : 'icon-add', }); ``` # 事件列表 ``` 窗口的事件完整继承自 Panel(面板)。所以，直接参考 Panel 面板的事件即可。 //Window 事件 $('#box').window({ width : 600, height : 400, modal : true, onClose : function () { alert('关闭后触发！'); }, }); ``` # 方法列表 > 窗口的方法扩展自 Panel(面板)，窗口新增方法如下： |方法名 | 参数 | 说明| | --- | --- | | window | none | 返回外部窗口对象| | hcenter| none| 仅水平居中窗口。| | vcenter | none| 仅垂直居中窗口。| | center | none | 将窗口绝对居中。| *** ``` //返回外部窗口对象 console.log($('#box').window('window')); //单击时调整位置 $(document).click(function () { $('#box').window('move', { left : 0, top : 0, }); }); //双击时恢复各种居中 $(document).dblclick(function () { //替换成 center 或 vcenter 亦可 $('#box').window('hcenter'); })}); // 使用$.fn.window.defaults 重写默认值对象。 // window 组件最强大的地方就是可以内部布局和添加 linkbutton。 // 具体布局方法如下： // 1.外部用 window 组件包裹一下； // 2.内部用 layout 组件左右各分配一个，底部分配一个； // 3.底部添加一个按钮即可。 ```