>　這個組件依賴于 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.底部添加一個按鈕即可。 ```