Easyui-交互式消息弹出框

最新推荐文章于 2019-11-21 14:02:03 发布

原创最新推荐文章于 2019-11-21 14:02:03 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用EasyUI库实现带有确认和取消选项的弹窗对话框，通过具体的代码实例展示了如何配置和使用该功能，并给出了将默认英文按钮文本更改为中文的方法。

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

由于项目在优化的时候需要用到弹出框，按自己的想法是傻傻的用一些alert直接弹出得了，但是这样用户体验度不是特别好，影响界面美观，所以自己还是用了封装好的easyui给的消息框，怎么用呢，这个里面很有文章。

我用的是那种弹出框有确定、取消功能的消息提示框，所以重点说一下这个的用法。

需求：需要对一个事件进行判断是否往下进行？

做法：

引用easyui封装部分：

    <script src="../../Scripts/jquery-1.7.1.min.js"></script>
    <script src="../../Scripts/jquery-1.7.1.js"></script>
    <script src="../../EasyuiSource/jquery.easyui.min.js"></script>
    <link href="../../Content/base-master/src/base.css" rel="stylesheet" />
    <link href="../../Content/iconfont-master/index.css" rel="stylesheet" />
    <link href="../../Content/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
    <link href="../../Content/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />

Html部分：

<a href="#" class="easyui-linkbutton" id="up1" data-options="iconCls:'icon-redo'" type="text/html" onclick="Next()" style="margin-left: 750px;">完成</a>

JavaScript部分：

    function Next() {
        $.messager.confirm('温馨提示', '完成后信息无法修改，确定完成吗？', function (r) {
            if (r)//选择确定或者OK
            {
                $.ajax({
                    type: "POST",
                    url: "/FreshNewReport/UpdateBasicStudentinfo",
                    success: function (data) {
                        if (data == "True") {
                            window.location.href = "../FreshNewReport/SuccessReport";
                        }
                        else {
                            $.messager.alert('警告','信息入库失败，请联系管理员','info')
                        }
                    }
                });
            }
        })
    }

效果：

上面的点击按钮为英文的，如果想变为中文的，修改JavaScript部分即可，如下：

    function Next() {
        $.extend($.messager.defaults, {
            ok: "确定",
            cancel: "取消"
        });
        $.messager.confirm('温馨提示', '完成后信息无法修改，确定完成吗？', function (r) {
            if (r)//选择确定或者OK
            {
                $.ajax({
                    type: "POST",
                    url: "/FreshNewReport/UpdateBasicStudentinfo",
                    success: function (data) {
                        if (data == "True") {
                            window.location.href = "../FreshNewReport/SuccessReport";
                        }
                        else {
                            $.messager.alert('警告','信息入库失败，请联系管理员','info')
                        }
                    }
                });
            }
        })
    }

想要了解更多的关于提示框的点击：快来瞧瞧

感谢您的宝贵时间···