jqueryeasyui dialog plugin的使用

dialog是一类特殊的窗口，它可以在顶部有一个工具栏并且在底部有一个按钮栏。dialog默认在顶部的右上方只有一个关闭按钮。用户可以通过配置dialog的行为来展示其他的工具，比如说收缩、最小化、最大化等等。

dialog依赖以下组件：window、linkbutton。

dialog的使用案例

通过标签来创建

<div id="dia" class="easyui-dialog" data-options="title: 'dialog example', width: 400, height: 300">
  dialog content
</div>

上述代码创建了一个长度为400，高度为300的对话框，标题为dialog example。

通过javascript脚本来创建

<div id="dig">
  dialog content
</div>

$("#dia").dialog({title: 'dialog example', width: 400, height: 300});

既然window可以使用ajax来加载内容，那么dialog也是可以的，同样使用refresh方法来加载

$("#dia").dialog('refresh', 'index.jsp');

dialog的属性

名称	值类型	描述	Default
title	string	dialog插件的标题	New Dialog
collapsible	boolean	是否显示收缩按钮	false
minimizable	boolean	是否显示最小化按钮	false
maximizable	boolean	是否显示最大化按钮	false
resizable	boolean	定义dialog是否可以调整大小	false
toolbar	array,selector	dialog插件的工具栏，可以具有以下值： 1) 一个数组, 其中的每一个元素是一个linkbutton。 2) 一个象征了toolbar的选择子。 通过div标签创建toolbar <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> 通过数组创建toolbar <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	底部的button栏可以是以下的值： 1) 一个数组，里面的每一个元素是一个linkbutton。 2) 一个代表button bar的选择子。 使用div创建button bar <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> 使用数组创建button bar <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

dialog的方法

名称	参数	描述
dialog	none	返回外部的dialog对象