9

confirm()ダイアログ（質問と2つのボタンがあるdiv）をtrue表示し、ユーザーが[OK]をクリックした場合などに戻るようなJavaScript関数を作成したいと思い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");
            }
        }
    });
});

jsフィドル

于 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 に答える