EasyUI中Dialog对话框的简单使用-CFANZ编程社区

场景

效果

EasyUI中Dialog对话框的简单使用_css

属性

该属性扩展自窗口（window）下面是为对话框（dialog）重写的属性。

名称	类型	描述	默认值
title	string	对话框的标题文本。	New Dialog
collapsible	boolean	定义是否显示折叠按钮。	false
minimizable	boolean	定义是否显示最小化按钮。	false
maximizable	boolean	定义是否显示最大化按钮。	false
resizable	boolean	定义对话框是否可调整尺寸。	false
toolbar	array,selector	对话框的顶部工具栏，可能的值： 1、数组，每个工具的选项都与链接按钮（linkbutton）一样。 2、选择器，指示工具栏。对话框工具栏可以在 <div>标签中声明： `1. <div class="easyui-dialog" style="width:600px;height:300px" 2. data-options="title:'My Dialog',toolbar:'#tb',modal:true"> 3. Dialog Content. 4. </div> 5. <div id="tb"> 6. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> 7. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a> 8. </div>` 对话框工具栏也可以通过数组定义： `1. <div class="easyui-dialog" style="width:600px;height:300px" 2. data-options="title:'My Dialog',modal:true, 3. toolbar:[{ 4. text:'Edit', 5. iconCls:'icon-edit', 6. handler:function(){alert('edit')} 7. },{ 8. text:'Help', 9. iconCls:'icon-help', 10. handler:function(){alert('help')} 11. }]"> 12. Dialog Content. 13. </div>`	null
buttons	array,selector	对话框的底部按钮，可能的值： 1、数组，每个按钮的选项都与链接按钮（linkbutton）一样。 2、选择器，指示按钮栏。按钮可以在 <div>标签中声明： `1. <div class="easyui-dialog" style="width:600px;height:300px" 2. data-options="title:'My Dialog',buttons:'#bb',modal:true"> 3. Dialog Content. 4. </div> 5. <div id="bb"> 6. <a href="#" class="easyui-linkbutton">Save</a> 7. <a href="#" class="easyui-linkbutton">Close</a> 8. </div>` 按钮也可以通过数组定义： `1. <div class="easyui-dialog" style="width:600px;height:300px" 2. data-options="title:'My Dialog',modal:true, 3. buttons:[{ 4. text:'Save', 5. handler:function(){...} 6. },{ 7. text:'Close', 8. handler:function(){...} 9. }]"> 10. Dialog Content. 11. </div>`	null

事件

该事件扩展自面板（panel）。

方法

该方法扩展自窗口（window），下面是为对话框（dialog）添加的方法。

名称	参数	描述
dialog	none	返回外部对话框（dialog）对象。

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<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>
</body>
</html>