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: 新面板的頂部位置 |