9

我想创建一个类似于confirm()显示对话框（带有问题和 2 个按钮的 div）的 JavaScript 函数，并true在用户单击“确定”或false其他方式时返回。

是否可以使用 JavaScript/jQuery 但没有插件（例如 jQuery UI 或 Dialog）来做到这一点？因为我正在尝试减少尺寸和往返时间......

我试图编写这段代码，但我不知道如何让函数“等待”用户点击。

我想以这种方式使用我的功能：

answer=myConfirm("Are you sure?")

通过这种方式，我可以在多个上下文中使用相同的函数，只需更改作为参数传递的问题。这与confirm()的行为相同

4

3 回答 3

13

与等待用户输入然后从函数返回不同，在 JavaScript 中更常见的是提供一个回调函数，当您等待的操作完成时将调用该回调函数。例如：

myCustomConfirm("Are you sure?", function (confirmed) {
    if (confirmed) {
        // Whatever you need to do if they clicked confirm
    } else {
        // Whatever you need to do if they clicked cancel
    }
});

这可以按照以下方式实施：

function myCustomConfirm(message, callback) {
    var confirmButton, cancelButton;

    // Create user interface, display message, etc.

    confirmButton.onclick = function() { callback(true); };
    cancelButton.onclick = function() { callback(false); };
}
于 2012-05-30T22:17:09.017 回答
2

如果使用 jQuery，为什么不实现jQueryUI呢？并使用Dialog函数如下：

作为 2 部分：

HTML

<div id="dialog-confirm" title="ALERT">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure?</p>
</div>

脚本

$( "#dialog-confirm" ).dialog({
    resizable: false,
    modal: true,
    buttons: {
        "OK": function() {
            $( this ).dialog( "close" );
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});

全部在脚本中：

$(function() {
    $("<div />").attr("id", "dialog-confirm").append(
        $("<p />").text('Are you sure?').css("text-align", "center").prepend(
            $("<span />").addClass("ui-icon ui-icon-alert").css({
                float: 'left',
                margin: '0 7px 20px 0'
            })
        )
    ).dialog({
        resizable: false,
        modal: true,
        title: "ALERT",
        buttons: {
            "OK": function() {
                answer=1;
                $(this).dialog("close");
            },
            "Cancel": function() {
                answer=0;
                $(this).dialog("close");
            }
        }
    });
});

jsFiddle

于 2012-05-30T22:24:33.053 回答
1

这确实应该通过回调来完成。最接近您所追求的是使用带有一些自定义事件的发布和订阅模型。

为此：

当用户单击是按钮时，触发一个名为 clickedYes 的自定义事件。对“不”做同样的事情

$('#yesbtn').click(function(){
    $(document).trigger('clickedYes');
});

$('#nobtn').click(function(){
    $(document).trigger('clickedNo');
});

现在我们需要“监听”或订阅这些事件并在上下文中执行适当的操作。

让我们创建一个假设情况：您的用户单击删除并且您想要确认该选择。

如果他们点击是，首先设置你想要发生的事情：

$(document).unbind('clickedYes'); //Unbind any old actions
$(document).bind('clickedYes',function(){
    //Code to delete the item
    //Hide the popup
});

那么如果他们单击“否”，您希望发生什么：

$(document).unbind('clickedNo'); //Unbind any old actions
$(document).bind('clickedNo',function(){
    //Hide the popup and don't delete
});

所以我们设置了监听 clickedYes 或 clickedNo 的操作。现在我们只需要向用户显示弹出窗口，以便他们必须单击是或否。当他们这样做时，他们将触发上述事件。

因此您的 myConfirm() 函数将执行以下操作：

function myConfirm(msg){
    //change the message to 'msg'
    //Show the popup
}

所以顺序是：

  1. 将自定义事件的触发器绑定到是和否按钮
  2. 在提示之前 - 取消绑定任何旧操作并附加您的新操作
  3. 向用户显示一个弹出窗口，使他们触发您的操作。

这将允许您像这样调用函数 myConfirm('Are you sure'); 这不是你所追求的……但我认为不可能完全按照你的意愿去做。

于 2012-05-30T22:29:42.797 回答