jqueryeasyui dialog plugin的使用

池麒
2023-12-01

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对象

 类似资料: