使用jQuery UI对话框返回布尔值 - true或false

Question

我正在尝试替换 JavaScript 的 confirm() 函数。我找到了可以完全自定义的 jquery dialog() 函数。问题是我无法让它返回 true 或 false。

以下是我的代码：

$('#delBox').dialog(
        { autoOpen: false, resizable: false, modal: true, closeOnEscape: true, width: 300, height: 'auto', title: 'Deletar registro',
            buttons: {
                "Ok": function () {
                    return true;
                }, "Cancelar": function () {
                    $(this).dialog("close");
                    return false;
                }
            },
            open: function () {
                var buttonsSet = $('.ui-dialog-buttonset').find("button:contains('Ok')");
                buttonsSet.attr("class", "ui-button ui-state-default");
                $('.ui-dialog-titlebar-close span').empty();
                $('.ui-dialog-buttonset').find("button:contains('Ok')").button({
                    text: false,
                    icons: {
                        primary: 'ui-icon-ok'
                    }
                });

                $('.ui-dialog-buttonset').find("button:contains('Cancelar')").button({
                    text: false, 
                    icons: {
                        primary: 'ui-icon-cancel'
                    }
                });
            }
        });

这只会在选择选项之前返回一个对象：

function deletar() {
     alert($('#delBox').dialog('open'));
}

- dipi evil

Answer 1

jQueryUI对话框不能返回true或false，因为它们显示在其他内容的顶部，但不会阻止执行。最好的做法是：

1. 使对话框变为modal，以隐藏其他内容

2. 提供回调函数，根据选择哪个选项来使用。

如果你想要额外加分，可以创建一个$.Deferred() promise对象，并在显示对话框时返回该对象。然后，在按钮事件处理程序中，你可以resolve或reject该promise。

这将在显示对话框框时给你清晰地分离出触发后续操作的动作。

function showDialog() {
   var def = $.Deferred();

   // create and/or show the dialog box here
   // but in "OK" do 'def.resolve()'
   // and in "cancel" do 'def.reject()'

   return def.promise();
}

showDialog().done(function() {
    // they pressed OK
}).fail(function() {
    // the pressed Cancel
});

// NB: execution will continue here immediately - you shouldn't do
//     anything else now - any subsequent operations need to be
//     started in the above callbacks.

- Alnitak

---

你认为这个函数应该返回完整的Deferred对象还是通过return def.promise()返回受限Promise接口？ - Ates Goral

@AtesGoral 是的，def.promise() 更好 - 很好的观点。 - Alnitak

在 showDialog 中，我是否需要使用 $.one 将事件绑定到 OK 和 Cancel 上，即每次调用 showDialog 时都会添加一次执行的事件？有没有一种方法可以使用 $.on，即绑定它们一次并重复使用 showDialog？ - user

@buffer 没有头绪 - 这取决于自定义对话框的实现方式。 - Alnitak

没有触发失败回调函数 :( - QMaster

Answer 2

第一个答案很好 - 我想我可以添加一些代码，展示如何返回被点击的按钮：

function ShowYesNoMessage(title, message) {
var def = $.Deferred();
$("#infoMessage").html(message);

$("#dialog_infoMessage").dialog({
    modal: true,
    title: title,
    buttons: {
        Yes: function () {
            $("#infoMessage").html("");
            $(this).dialog("close");
            def.resolve("Yes");
        },
        No: function () {
            $("#infoMessage").html("");
            $(this).dialog("close");
            def.resolve("No");
        }
    }
});
return def.promise();
}


$.when(ShowYesNoMessage("Are you sure", message)).then(
            function(status) {
                if (status == "Yes") {
                    //do the next step
                }
            }
        );

- Peter Munnings

---

就二选一而言，我更喜欢使用.resolve / .reject的组合。另外，如果在$.when内部调用的函数返回一个Promise，那么就不需要使用$.when了。 - Alnitak