jQuery UI对话框，返回boolean - true或false [英] jQuery UI dialog with boolean return - true or false

问题描述

我正在尝试替换 javascript confirm（）。我发现可以完全定制的jquery dialog（）函数。问题是我不能让它返回 true 或 false 。

这是我的代码：

{autoOpen：false，resizable：false，modal：true，closeOnEscape：$）$ $ $ $ $ $ $ $ $ $ $ true，width：300，height：'auto'，title：'Deletar registro'，
按钮：{
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' （button：contains（'Ok'））。button（{
text：false，
图标：{
primary：'ui-icon-ok'
}
}）;

$（'。ui-dialog-buttonset'）。find（button：contains（'Cancelar'））。button（{
text：false，
icons ：{
primary：'ui-icon-cancel'
}
}）;
}
}）;

只有在选择任何选项之前才返回一个对象：

$ b $函数deletar（）{
alert（$（'＃delBox'）。dialog（'open'））; b

  
} 
  

解决方案

jQueryUI对话框不能返回一个 true 或 false ，因为它们显示在其他内容之上，但没有阻止执行。

您可以做的最好的是：

1. 使框 modal ，以便隐藏其他内容




2. 提供要使用的回调，取决于哪个

对于额外的奖励积分，您可以创建一个 $ Deferred ） promise对象，并返回当您显示对话框时。然后，您可以在按钮事件处理程序中解析或拒绝承诺。

这将使您在显示对话框和执行随后触发的操作之间保持干净分离：

  function showDialog（）{
 var def = $ .Deferred（）; 
 
 //在这里创建和/或显示对话框
 //但在OKdo'def.resolve（）'
 //和取消中'def.reject（）'
 
 return def.promise（）; 
} 
 
 showDialog（）。done（function（）{
 //他们按下OK 
}）。fail（function（）{
 / /按下取消
}）; 
 
 //注意：执行会立即在这里继续 - 你不应该做
 //其他任何东西 - 任何后续操作需要
 //在上述回调中启动。 
  

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.

Here is my code:

$('#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 dialog boxes can't return a true or false as they're shown on top of other content but without blocking execution.

The best you can do is:

1. make the box modal so that it hides the other content

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

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.

这篇关于jQuery UI对话框，返回boolean - true或false的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！