@author YHC
从 $.fn.window.defaults继承,覆盖默认值 $.fn.dialog.defaults.
dialog 是一个特殊的类型的window,它可以有一个工具栏在它的顶部和一个按钮栏在它的下面,默认dialog 只有唯一一个关闭按钮在它头部的右上角,用户
可以配置dialog 的行为显示其他工具按钮,例如:collapsible, minimizable, maximizable 工具等等...
相关依赖
- window
- linkbutton
使用
通过标记创建 dialog 从已有存在的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创建
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的重写属性.
Name | Type | Description | Default |
---|---|---|---|
title | string | dialog 标题文本. | New Dialog |
collapsible | boolean | 定义是否显示可折叠按钮. | false |
minimizable | boolean | 定义是否显示最小化按钮. | false |
maximizable | boolean | 定义是否显示做大化按钮. | false |
resizable | boolean | 定义dialog是否可以改变大小. | false |
toolbar | array,selector | dialog顶部的工具栏, 可用值: 1) 一个数组,所有tool的选项(options)和linkbutton相同. 2) 一个选择器指定toolbar. dialog工具栏定义可以在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> dialog工具栏定义也可以通过数组: <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 | dialog下面的button, 可用值: 1) 一个数组,所有button选项(options)和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 |
事件
事件从window继承.
方法
方法从 window继承,以下是dialog的新增的方法.
Name | Parameter | Description |
---|---|---|
dialog | none | 返回外部的dialog对象. |
以上如有错误信息,请指出,thanks!