dialog是一類特殊的窗口，它可以在頂部有一個工具欄並且在底部有一個按鈕欄。dialog默認在頂部的右上方只有一個關閉按鈕。用戶可以通過配置dialog的行爲來展示其他的工具，比如說收縮、最小化、最大化等等。
dialog依賴以下組件：window、linkbutton。
dialog的使用案例
通過標籤來創建
<div id="dia" class="easyui-dialog" data-options="title: 'dialog example', width: 400, height: 300">
dialog content
</div>上述代碼創建了一個長度爲400，高度爲300的對話框，標題爲dialog example。
通過javascript腳本來創建
<div id="dig">
dialog content
</div>$("#dia").dialog({title: 'dialog example', width: 400, height: 300});既然window可以使用ajax來加載內容，那麼dialog也是可以的，同樣使用refresh方法來加載
$("#dia").dialog('refresh', 'index.jsp');dialog的屬性
| 名稱 | 值類型 | 描述 | Default |
|---|---|---|---|
| title | string | dialog插件的標題 | New Dialog |
| collapsible | boolean | 是否顯示收縮按鈕 | false |
| minimizable | boolean | 是否顯示最小化按鈕 | false |
| maximizable | boolean | 是否顯示最大化按鈕 | false |
| resizable | boolean | 定義dialog是否可以調整大小 | false |
| toolbar | array,selector |
dialog插件的工具欄，可以具有以下值： 1) 一個數組, 其中的每一個元素是一個linkbutton。 2) 一個象徵了toolbar的選擇子。 通過div標籤創建toolbar <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',toolbar:'#tb',modal:true"> Dialog Content. </div> <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a> </div> 通過數組創建toolbar <div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',modal:true,
toolbar:[{
text:'Edit',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},{
text:'Help',
iconCls:'icon-help',
handler:function(){alert('help')}
}]">
Dialog Content.
</div>
|
null |
| buttons | array,selector |
底部的button欄可以是以下的值： 1) 一個數組，裏面的每一個元素是一個linkbutton。 2) 一個代表button bar的選擇子。 使用div創建button bar <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:'My Dialog',buttons:'#bb',modal:true"> Dialog Content. </div> <div id="bb"> <a href="#" class="easyui-linkbutton">Save</a> <a href="#" class="easyui-linkbutton">Close</a> </div> 使用數組創建button bar <div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',modal:true,
buttons:[{
text:'Save',
handler:function(){...}
},{
text:'Close',
handler:function(){...}
}]">
Dialog Content.
</div>
|
null |
dialog的方法
| 名稱 | 參數 | 描述 |
|---|---|---|
| dialog | none | 返回外部的dialog對象 |
