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");
};