easyUI 创建Dialog对话框

最新推荐文章于 2020-09-16 17:05:00 发布

最新推荐文章于 2020-09-16 17:05:00 发布 · 173 阅读

文章标签：

#javascript #ViewUI

本文介绍如何使用EasyUI库创建对话框(dialog)，包括基本配置、工具栏(toolbar)及按钮(buttons)的设置方法。通过示例代码展示了如何定义对话框的内容区域、工具栏和按钮，并介绍了使对话框可调整大小的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@author YHC

dialog是一个特殊的window,可以包含工具栏在顶部和按钮在下面,但是默认的dialog不能改变大小,但是用户可以设置resizable 属性为true使其可以改变大小.

查看 Demo

创建 Dialog

dialog非常简单,可以从 DIV 创建,就像这样:

<div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;"  
        title="My Dialog" iconCls="icon-ok"  
        toolbar="#dlg-toolbar" buttons="#dlg-buttons">  
    Dialog Content.  
</div>

准备工具栏和按钮

<div id="dlg-toolbar">  
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>  
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>  
</div>  
<div id="dlg-buttons">  
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:alert('Ok')">Ok</a>  
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Cancel</a>  
</div>

以上代码我们创建了一个 dialog 和工具栏以及按钮,这是标准配置dialog, toolbar, content 和buttons.