JQuery确认对话框

Question

我正在寻找一种方法来实现与JQuery可重用的"确认"对话框..

这是MyApp类打开对话框的部分:

/**
 * @param text string Message to display
 */
getConfirmationDialog: function(text) {
   MyApp.confirmDialog = $('<div><p>' + text + '</p></div>');
   MyApp.confirmDialog
    .dialog({
        modal: true,
        autoOpen: false,
        title: 'Please confirm',
        width: 300,
        height: 180,
        buttons: {
            'OK': function() {
                return true;
            },
            Cancel: function() {
                $(this).dialog('close');
                return false;
            }
        }
    });

    MyApp.confirmDialog.dialog('open');
},

在另一个班级我做:

/**
 * Clear system cache
 *
 * @param url string Backend URL
 */
clearCache: function(url) {

    dialog = MyApp.getConfirmationDialog('Clear cache?');

    //dialog returns true..
    if (dialog) {
        MyApp.admin.dashboard.doClearCache();
    }

},

但我不知道以"正确"的方式做到这一点..对话框无法返回值或？

Answer 1

下面的代码是我解决这个问题的方法.我记录了函数中的用法,但在此强调它:

$.ConfirmDialog('Do you want to continue?', 'Continue Title', function() { alert('yes'); }, function() { alert('no'); }, null);

无需特殊设置,只需在页面上包含"ConfirmDialog"代码块(我将其放入我的app.js中)并使用上面的单行调用.请享用!

$.ConfirmDialog = function (message, title, callbackYes, callbackNo, callbackArgument) {
    /// <summary>
    ///     Generic confirmation dialog.
    ///
    ///     Usage:
    ///         $.ConfirmDialog('Do you want to continue?', 'Continue Title', function() { alert('yes'); }, function() { alert('no'); }, null);
    ///         $.ConfirmDialog('Do you want to continue?', 'Continue Title', function(arg) { alert('yes, ' + arg); }, function(arg) { alert('no, ' + arg); }, 'please');
    ///</summary>
    ///<param name="message" type="String">
    ///     The string message to display in the dialog.
    ///</param>
    ///<param name="title" type="String">
    ///     The string title to display in the top bar of the dialog.
    ///</param>
    ///<param name="callbackYes" type="Function">
    ///     The callback function when response is yes.
    ///</param>
    ///<param name="callbackNo" type="Function">
    ///     The callback function when response is no.
    ///</param>
    ///<param name="callbackNo" type="Object">
    ///     Optional parameter that is passed to either callback function.
    ///</param>

    if ($("#modalConfirmDialog").length == 0)
        $('body').append('<div id="modalConfirmDialog"></div>');

    var dlg = $("#modalConfirmDialog")
        .html(message)
        .dialog({
            autoOpen: false, // set this to false so we can manually open it
            dialogClass: "confirmScreenWindow",
            closeOnEscape: true,
            draggable: false,
            width: 460,
            minHeight: 50,
            modal: true,
            resizable: false,
            title: title,
            buttons: {
                Yes: function () {
                    if (callbackYes && typeof (callbackYes) === "function") {
                        if (callbackArgument == null) {
                            callbackYes();
                        } else {
                            callbackYes(callbackArgument);
                        }
                    }

                    $(this).dialog("close");
                },

                No: function () {
                    if (callbackNo && typeof (callbackNo) === "function") {
                        if (callbackArgument == null) {
                            callbackNo();
                        } else {
                            callbackNo(callbackArgument);
                        }
                    }

                    $(this).dialog("close");
                }
            }
        });
    dlg.dialog("open");
};

Answer 2

jQuery ui 没有提供更改对话框按钮事件的好方法。

我会使用 pubsub 模式，来自 Cowboyba 的小型 pubsub 插件（此处）或 phiggins 的努力（此处）。它比尝试使用 jquery ui getter 和 setter 来尝试更改按钮及其单击事件更干净，如果您制作一个大型应用程序，它将在许多其他地方为您提供帮助。

您可以发布单击“确定”按钮的事件，然后订阅和取消订阅其他处理程序以侦听该事件。

此处的快速演示用于展示功能。