Dialog( 对话框) 组件

一． 加载方式
//class 加载方式
<div class="easyui-dialog" title="My Dialog"
style="width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true">
对话框
</div>

//JS 加载调用
$('#box').dialog({
title : '标题',
width : 400,
height : 250,
modal : true,
});

 

二． 属性列表
窗口属性扩展自 Window(面板)，窗口新增或重新定义的属性如下：

//属性设置
$('#box').dialog({
title : '标题',
width : 400,
height : 250,
modal : true,

//toolbar : '#tt',
toolbar : [{
text : '编辑',
iconCls : 'icon-edit',
handler : function () {
alert('edit');
},
}, {}],

//buttons : '#bb',
buttons : [{
text : '保存',
iconCls : 'icon-ok',
handler : function () {
alert('save');
}
},{}]
});
<div id="tt">
<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 id="bb">

<a href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-ok'">保存</a>
<a href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-cancel'">关闭</a>
</div>
PS：Dialog 是继承自 Window 组件的，所以 Window 组件和 Panel 组件均可用。

 

三． 事件列表
窗口的事件完整继承自 Window(面板)。所以，直接参考 Window 面板的事件即可。

//Dialog 事件
$('#box').dialog({
width : 600,
height : 400,
modal : true,
onClose : function () {
alert('关闭后触发！');
},
});

 

四． 方法列表
对话框的方法扩展自 Window(窗口)，对话框新增方法如下：

 

//返回外部窗口对象
console.log($('#box').window('dialog'));

使用$.fn.window.defaults 重写默认值对象。