Вопрос по jquery, callback, javascript – Пользовательский диалог подтверждения с JavaScript

8

Я хотел бы создать функцию JavaScript, похожую наconfirm(), который показывает диалог (div с вопросом и 2 кнопками) и возвращаетtrue если пользователь нажимает «ОК» илиfalse иначе

Можно ли это сделать с помощью JavaScript / jQuery, нобе плагины (например, jQuery UI или Dialog)? Потому что я пытаюсь уменьшить размер и время поездки туда и обратно ...

Я пытался написать этот код, но я не знаю, как заставить функцию «ждать» щелчка пользователя.

Я хотел бы использовать свою функцию таким образом:

answer=myConfirm("Are you sure?")

Таким образом, я мог бы использовать одну и ту же функцию в нескольких контекстах, просто меняя вопрос, передаваемый в качестве параметра. Это то же самое поведениеconfirm ()

Возможно, интерес:window.showModalDialog(). David Thomas
Вы действительно должны реализовать пользовательское диалоговое окно подтверждения с обратным вызовом. Вы отображаете диалоговое окно, и функция обратного вызова вызывается, когда пользователь нажимает кнопку. Sam Dufel
Событие щелчка на кнопках «да» и «нет» должно быть переопределено / переопределено для каждого экземпляра всплывающего окна. Если вы определяете их только один раз, событие click не может вернуть логическое значение самому последнему экземпляру. Это цель обратного вызова, чтобы дать кнопкам «да / нет» контекст для действия. Brad Barrow

Ваш Ответ

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); };
}
Спасибо за ответ. Я редактировал вопрос supergiox
@ supergiox: Вы все еще можете использовать описанную мной функцию в разных контекстах. Единственная разница - вместо того, чтобы писатьif (myConfirm(msg)) { … } else { … } каждый раз, когда ты им пользуешься, ты пишешьmyConfirm(msg, function (c) { if (c) { … } else { … } }); georgebrock
Спасибо, это работает. мы даже можем создать функцию для отображения большего количества кнопок. используйте 0 и 1 как false и true по умолчанию и другие числа для различных опций. Victor Ferreira
2

JQueryUI? И используйте Диалог работает следующим образом:

как часть 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>

@ Scri

$( "#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

Я хочу сэкономить как можно больше места. Если не будет "чистого" способа javascript, я буду использовать ваше решение supergiox
Вы используете jquery, но хотите "чистый javascript" ... который с тех пор просто не получается? Если речь идет о памяти, jqueryui - это очень легкое расширение jquery, но если это серверная память, ну ... это все еще очень маленький уменьшенный файл. SpYk3HH
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
}

Так что порядок будет:

Связать триггеры для пользовательских событий с кнопками да и нет Перед запросом - отмените все старые действия и прикрепите новые. Представьте пользователю всплывающее окно, которое заставит его вызвать ваши действия.

Это позволит вам вызывать такую функцию myConfirm («Вы уверены»); Это не совсем то, что вы ищете ... но я не думаю, что можно делать именно то, что вы хотите.

Я редактировал вопрос supergiox

Похожие вопросы