EASYUI Dialog的基本使用

最新推荐文章于 2025-07-22 00:16:16 发布

weixin_34216036

最新推荐文章于 2025-07-22 00:16:16 发布

阅读量171

点赞数

文章标签： xhtml javascript ViewUI

本文详细介绍了如何使用EasyUI框架创建对话框，并展示了通过不同方式设置对话框的基本属性、工具栏及按钮栏的方法。此外，还提供了对话框的常用属性、事件及方法介绍。

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

1、基本使用

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Dialog</title>
    <link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#dlg').dialog({
                title: '对话框',
                iconCls: "icon-edit",
                collapsible: true,
                minimizable: true,
                maximizable: true,
                resizable: true,
                width: 300,
                height: 200,
                modal: true
            });
        });
    </script>
</head>
<body>
    <div id="dlg">
        Content
    </div>
</body>
</html>

或

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Dialog</title>
    <link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="dlg" class="easyui-dialog" style="width:300px; height:200px;" title="对话框" iconCls="icon-edit">
        Content
    </div>
</body>
</html>

效果图：

2、工具栏、按钮栏

代码：

<script type="text/javascript">
    $(function () {
        $('#dlg').dialog({
            title: '对话框',
            iconCls:"icon-edit",
            collapsible: true,
            minimizable: true,
            maximizable: true,
            resizable: true,
            width: 300,
            height: 200,
            modal: true,
            href: "Content.aspx",
            onClose: function () {
                alert("Close");
            },
            toolbar: [{
                text: 'Add',
                iconCls: 'icon-add',
                handler: function () {
                    alert('add');
                }
            }, '-', {
                text: 'Save',
                iconCls: 'icon-save',
                handler: function () {
                    alert('save');
                }
            }],
            buttons: [{
                text: 'Ok',
                iconCls: 'icon-ok',
                handler: function () {
                    alert('ok');
                }
            }, {
                text: 'Cancel',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#dlg').dialog('close');
                }
            }]
        });
    });
</script>

效果图：

3、参数

属性名	类型	描述	默认值
title	字符串	对话框的标题文本	New Dialog
collapsible	布尔	定义是否显示可折叠按钮	false
minimizable	布尔	定义是否显示最小化按钮	false
maximizable	布尔	定义是否显示最大化按钮	false
resizable	布尔	定义对话框是否可编辑大小	false
toolbar	数组	对话框上的工具条，每个工具条包括:	text, iconCls, disabled, handler etc. null
buttons	数组	对话框底部的按钮，每个按钮包括:	text, iconCls, handler etc. null