带有布尔返回的 jQuery UI 对话框 - true 或 false

2022-01-15 00:00:00 user-interface dialog jquery javascript

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

I´m trying to do an replacement for the javascript confirm(). I have found the jquery dialog() function that can be fully customized. The problem is that i cant make it return true or 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'
                    }
                });
            }
        });

这只会在选择任何选项之前返回一个对象:

This only return an object before any option selected:

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

推荐答案

jQueryUI 对话框不能返回 true 或 false，因为它们显示在顶部其他内容，但没有阻塞执行.

jQueryUI dialog boxes can't return a true or false as they're shown on top of other content but without blocking execution.

你能做的最好的就是:

  1. 将框设为modal，使其隐藏其他内容

根据选择的选项提供要使用的回调.

supply callbacks to be used depending on which option is chosen.

对于额外的奖励积分，您可以创建一个 $.Deferred() 承诺对象并在您显示对话框时返回它.然后，您可以在按钮事件处理程序中 resolve 或 reject 承诺.

For extra bonus points, you could create a $.Deferred() promise object and return that when you show the dialog. You can then resolve or reject that promise in the button event handlers.

这将使您在显示对话框和执行随后由它触发的操作之间清晰地分开:

This would give you clean separation between showing the dialog box, and performing the actions subsequently triggered by it:

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.

相关文章