本系列只列出一些常用的屬性、事件或方法，具體完整知識請查看API文檔
Window（窗口）
窗口控件是一個浮動和可拖拽的面板可以用作應用程序窗口。默認情況下,窗口可以移動,調整大小和關閉。它的內容也可以被定義為靜態html或要么通過ajax動態加載。
1. 通過標簽窗口窗口。
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true"> Window Content </div>
2. 通過Javascript創建窗口。
<div id="win"></div>
$('#win').window({ width:600, height:400, modal:true });
3. 創建復合布局窗口。
像往常一樣定義窗口布局。下面的例子顯示了如何將窗體分為兩部分：北部和中間。
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true"> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'north',split:true" style="height:100px"></div> <div data-options="region:'center'"> The Content. </div> </div> </div>
屬性
窗口的屬性擴展自panel(面板)，窗口新增或重新定義的屬性如下：
| 屬性名 | 屬性值類型 | 描述 | 默認值 |
|---|---|---|---|
| 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 |
Dialog（對話框窗口）
該對話框是一種特殊類型的窗口，它在頂部有一個工具欄，在底部有一個按鈕欄。對話框窗口右上角只有一個關閉按鈕用戶可以配置對話框的行為顯示其他工具,如collapsible,minimizable,maximizable工具等。
通過已存在的DOM節點元素標簽創建。下面的例子顯示了一個可變大小的模式窗口。
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true"> Dialog Content. </div>
使用Javascript創建對話框窗口也是允許的。現在讓我們創建一個模式窗口並調用'refresh'方法通過ajax讀取內容。
<div id="dd">Dialog Content.</div>
$('#dd').dialog({ title: 'My Dialog', width: 400, height: 200, closed: false, cache: false, href: 'get_content.php', modal: true }); $('#dd').dialog('refresh', 'new_content.php');
屬性
對話框窗口的屬性擴展自window(窗口)，對話框窗口重新定義的屬性如下：
| 屬性名 | 屬性值類型 | 描述 | 默認值 |
|---|---|---|---|
| title | string | 對話框窗口標題文本。 | New Dialog |
| collapsible | boolean | 定義是否顯示可折疊按鈕。 | false |
| minimizable | boolean | 定義是否顯示最小化按鈕。 | false |
| maximizable | boolean | 定義是否顯示最大化按鈕。 | false |
| resizable | boolean | 定義是否可以改變對話框窗口大小。 | false |
| toolbar | array,selector | 設置對話框窗口頂部工具欄，可用值有： 1) 一個數組，每一個工具欄中的工具屬性都和linkbutton相同。 2) 一個選擇器指定工具欄。 對話框窗口工具欄可以聲明在<div>標簽里面： <div class="easyui-dialog" style="width:600px;height:300px" 對話框窗口工具欄也可以通過數組進行定義： <div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',modal:true,
toolbar:[{
text:'編輯',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},{
text:'幫助',
iconCls:'icon-help',
handler:function(){alert('help')}
}]">
對話框窗口內容。 |
null |
| buttons | array,selector | 對話框窗口底部按鈕，可用值有： 1) 一個數組，每一個按鈕的屬性都和linkbutton相同。 2) 一個選擇器指定按鈕欄。 按鈕可以聲明在<div>標簽里面： <div class="easyui-dialog" style="width:600px;height:300px" 按鈕也可以通過數組定義： <div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'我的對話框',modal:true,
buttons:[{
text:'保存',
handler:function(){...}
},{
text:'關閉',
handler:function(){...}
}]">
對話框窗口內容。
</div>
|
null |
Messager（消息窗口）
消息窗口提供了不同的消息框風格，包含alert(警告框), confirm(確認框), prompt(提示框), progress(進度框)等。所有的消息框都是異步的。用戶可以在交互消息之后使用回調函數去處理結果或做一些自己需要處理的事情。
方法
| 方法名 | 方法參數 | 描述 |
|---|---|---|
| $.messager.show | options | 在屏幕右下角顯示一條消息窗口。該選項參數是一個可配置的對象： showType：定義將如何顯示該消息。可用值有：null,slide,fade,show。默認：slide。 showSpeed：定義窗口顯示的過度時間。默認：600毫秒。 width：定義消息窗口的寬度。默認：250px。 height：定義消息窗口的高度。默認：100px。 title：在頭部面板顯示的標題文本。 msg：顯示的消息文本。 style：定義消息窗體的自定義樣式。 timeout：如果定義為0，消息窗體將不會自動關閉，除非用戶關閉他。如果定義成非0的樹，消息窗體將在超時后自動關閉。默認：4秒。 代碼示例： $.messager.show({
title:'我的消息',
msg:'消息將在5秒后關閉。',
timeout:5000,
showType:'slide'
});
// 消息將顯示在頂部中間
$.messager.show({
title:'我的消息',
msg:'消息將在4秒后關閉。',
showType:'show',
style:{
right:'',
top:document.body.scrollTop+document.documentElement.scrollTop,
bottom:''
}
});
|
| $.messager.alert | title, msg, icon, fn | 顯示警告窗口。參數： title：在頭部面板顯示的標題文本。 msg：顯示的消息文本。 icon：顯示的圖標圖像。可用值有：error,question,info,warning。 fn: 在窗口關閉的時候觸發該回調函數。 代碼示例： $.messager.alert('我的消息','這是一個提示信息！','info');
|
| $.messager.confirm | title, msg, fn | 顯示一個包含“確定”和“取消”按鈕的確認消息窗口。參數： title：在頭部面板顯示的標題文本。 msg：顯示的消息文本。 fn(b): 當用戶點擊“確定”按鈕的時侯將傳遞一個true值給回調函數，否則傳遞一個false值。 代碼示例 $.messager.confirm('確認對話框', '您想要退出該系統嗎？', function(r){
if (r){
// 退出操作;
}
});
|
| $.messager.prompt | title, msg, fn | 顯示一個用戶可以輸入文本的並且帶“確定”和“取消”按鈕的消息窗體。參數： title：在頭部面板顯示的標題文本。 msg：顯示的消息文本。 fn(val): 在用戶輸入一個值參數的時候執行的回調函數。 代碼示例： $.messager.prompt('提示信息', '請輸入你的姓名：', function(r){
if (r){
alert('你的姓名是：' + r);
}
});
|
| $.messager.progress | options or method | 顯示一個進度消息窗體。 屬性定義為： title：在頭部面板顯示的標題文本。默認：空。 msg：顯示的消息文本。默認：空。 text：在進度條上顯示的文本。默認：undefined。 interval：每次進度更新的間隔時間。默認：300毫秒。 方法定義為： bar：獲取進度條對象。 close：關閉進度窗口。 代碼示例： 顯示進度消息窗口。$.messager.progress();關閉進度消息窗口。 $.messager.progress('close');
|