### Dialog(对话框窗口)
扩展自$.fn.window.defaults。使用$.fn.dialog.defaults重写默认值对象。
该对话框是一种特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。
![](https://box.kancloud.cn/2016-07-19_578d913a29fd4.png)
####
#### 依赖关系
- [window](#)
- [linkbutton](#)
####
#### 用法
通过已存在的DOM节点元素标签创建。下面的例子显示了一个可变大小的模式窗口。
1. **<div** id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
1. data-options="iconCls:'icon-save',resizable:true,modal:true"**>**
1. Dialog Content.
1. **</div>**
<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读取内容。
1. **<div** id="dd"**>**Dialog Content.**</div>**
<div id="dd">Dialog Content.</div>
1. $('#dd').dialog({
1. title: 'My Dialog',
1. width: 400,
1. height: 200,
1. closed: false,
1. cache: false,
1. href: 'get_content.php',
1. modal: true
1. });
1. $('#dd').dialog('refresh', 'new_content.php');
$('#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](#)(窗口),对话框窗口重新定义的属性如下:
<table class="doc-table" align="left"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>title</td> <td>string</td> <td>对话框窗口标题文本。</td> <td>New Dialog</td></tr><tr><td>collapsible</td> <td>boolean</td> <td>定义是否显示可折叠按钮。</td> <td>false</td></tr><tr><td>minimizable</td> <td>boolean</td> <td>定义是否显示最小化按钮。</td> <td>false</td></tr><tr><td>maximizable</td> <td>boolean</td> <td>定义是否显示最大化按钮。</td> <td>false</td></tr><tr><td>resizable</td> <td>boolean</td> <td>定义是否可以改变对话框窗口大小。</td> <td>false</td></tr><tr><td>toolbar</td> <td>array,selector</td> <td>设置对话框窗口顶部工具栏,可用值有:<br/>1) 一个数组,每一个工具栏中的工具属性都和linkbutton相同。<br/>2) 一个选择器指定工具栏。 <p>对话框窗口工具栏可以声明在<div>标签里面:</p> <p><div class="easyui-dialog" style="width:600px;height:300px"<br/>data-options="title:'我的对话框',toolbar:'#tb',modal:true"><br/>对话框窗口内容。<br/></div><br/><div id="tb"><br/><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a><br/><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a><br/></div><br/></p> <p>对话框窗口工具栏也可以通过数组进行定义:</p><pre><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')}
}]">
对话框窗口内容。</div>
</pre></td> <td>null</td></tr><tr><td>buttons</td> <td>array,selector</td> <td>对话框窗口底部按钮,可用值有:<br/>1) 一个数组,每一个按钮的属性都和linkbutton相同。<br/>2) 一个选择器指定按钮栏。 <p>按钮可以声明在<div>标签里面:</p> <p><div class="easyui-dialog" style="width:600px;height:300px"<br/>data-options="title:'My Dialog',buttons:'#bb',modal:true"><br/> 对话框窗口内容。<br/></div><br/><div id="bb"><br/><a href="#" class="easyui-linkbutton">保存</a><br/><a href="#" class="easyui-linkbutton">关闭</a><br/></div><br/></p> <p>按钮也可以通过数组定义:</p><pre><div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'我的对话框',modal:true,
buttons:[{
text:'保存',
handler:function(){...}
},{
text:'关闭',
handler:function(){...}
}]">
对话框窗口内容。
</div>
</pre></td> <td>null</td></tr></tbody></table>
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
####
#### 事件
对话框窗口事件完全继承自[window](#)(窗口)。
####
#### 方法
对话框窗口的方法扩展自[window](#)(窗口),对话框窗口新增的方法如下:
| **方法名** | **方法参数** | **描述** |
|-----|-----|-----|
| dialog | none | 返回外部对话框窗口对象。 |
?
- jQuery EasyUI 1.4 版 API 中文版 (Made By Richie696)
- 文档说明
- 汉化说明
- EasyUI更新说明
- Base(基础)
- parser(解析器)
- easyloader(简单加载)
- draggable(拖动)
- droppable(放置)
- resizable(调整大小)
- pagination(分页)
- searchbox(搜索框)
- progressbar(进度条)
- tooltip(提示框)
- Layout(布局)
- panel(面板)
- tabs(选项卡)
- accordion(分类)
- layout(布局)
- Menu and Button(菜单和按钮)
- menu(菜单)
- linkbutton(按钮)
- menubutton(菜单按钮)
- splitbutton(分割按钮)
- Form(表单)
- form(表单)
- validatebox(验证框)
- textbox(文本框)
- combo(自定义下拉框)
- combobox(下拉列表框)
- combotree(树形下拉框)
- combogrid(数据表格下拉框)
- numberbox(数值输入框)
- datebox(日期输入框)
- datetimebox(日期时间输入框)
- datetimespinner(日期时间微调框)
- calendar(日历)
- spinner(微调)
- numberspinner(数字微调)
- timespinner(时间微调)
- slider(滑动条)
- filebox(文件框)
- Window(窗口)
- window(窗口)
- dialog(对话框窗口)
- messager(消息窗口)
- DataGrid and Tree(表格和树)
- datagrid(数据表格)
- propertygrid(属性表格)
- tree(树)
- treegrid(树形表格)
- Extension(扩展)
- Portal(门户)
- DataGrid View(数据表格展示)
- Editable DataGrid(可编辑表格)
- Editable Tree(可编辑树)
- DataGrid Filter Row(可过滤行的数据表格)
- Drag and Drop Rows in DataGrid(可拖放行的数据表格)
- Drag and Drop Rows in TreeGrid(可拖放行的树形表格)
- DWR Loader(DWR装载器)
- RTL Support(RTL支持)
- Ribbon(Ribbon界面)