JQuery EasyUI window 用法

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