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