jQuery EasyUI 窗口插件– Dialog 對話框
jQuery EasyUI插件 擴展自$.fn.window.defaults。 通過$.fn.dialog.defaults 重寫默認的defaults。
對話框（dialog）是一個特殊類型的窗口，它在頂部有一個工具欄，在底部有一個按鈕欄。 默認情況下，對話框（dialog）只有一個顯示在頭部右側的關閉工具。 用戶可以配置對話框行為來顯示其他工具（比如：可折疊collapsible、可最小化minimizable、可最大化maximizable，等等）。
依賴
- window
- linkbutton
用法
通過標記從已有的DOM 節點創建對話框（dialog）。 下面的實例演示了一個帶有可調整尺寸特性的模態對話框。
<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 創建對話框（dialog）。 現在讓我們創建一個模態對話框，然後調用'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）下面是為對話框（dialog）重寫的屬性。
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| 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" 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>对话框工具栏也可以通过数组定义：
<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 | 对话框的底部按钮，可能的值： 1、数组，每个按钮的选项都与链接按钮（linkbutton）一样。 2、选择器，指示按钮栏。 按钮可以在 <div>标签中声明： <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>按钮也可以通过数组定义：
<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 |
事件
該事件擴展自面板（panel）。
方法
該方法擴展自窗口（window），下面是為對話框（dialog）添加的方法。
| 名称 | 参数 | 描述 |
|---|---|---|
| dialog | none | 返回外部对话框（dialog）对象。 |
jQuery EasyUI插件