easyUI Dialog

@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!