Блог

Я разрабатываю функцию подтверждения MooTools. В котором у меня есть две кнопки «ОК» и «ОТМЕНА».

Поэтому я хочу вернуть TRUE при нажатии кнопки OK и вернуть FALSE при нажатии кнопки ОТМЕНА.

Вот мой код функции.

 function confirm_box(title, text)
{
    var className = 'msgAlert info';
    var defaut_title ='Information';

    // Placing the Overlay
    var overlay = new Element('div', {'class':'msgAlert_overlay'});
    $$('body').adopt(overlay);

    // Placing the Main Div With class name
    var main_box  = new Element('div', {'class': className});
    $$('body').adopt(main_box);

    var content_div = new Element('div', {'class':'msgAlert_popup'});
    //<a href="javascript:;" class="msgAlert_close"></a>
    if(title == '')
        title=defaut_title;
    content_div.set('html','<div class="msgAlert_header"><h4>' title '</h4></div><div class="msgAlert_content">' text '</div>');
    main_box.adopt(content_div);

    content_div.getChildren('a.msgAlert_close');

    var footer_div = new Element('div',{'class':'msgAlert_footer'});
    var ok_btn = new Element('button');
    ok_btn.addEvent('click', function(){
        main_box.fade(0);
        //overlay.fade(0);
        (function(){main_box.dispose(); overlay.dispose(); }).delay(350);
        return true;
    });

    var cancel_btn = new Element('button');
    cancel_btn.addEvent('click', function(){
        main_box.fade(0);
        //overlay.fade(0);
        (function(){main_box.dispose(); overlay.dispose();}).delay(350);
        return false;
    });

    ok_btn.set('html','Ok');
    cancel_btn.set('html','Cancel');
    footer_div.adopt(ok_btn);
    footer_div.adopt(cancel_btn);
    main_box.adopt(footer_div);
    ok_btn.focus();
}
  

Я поместил return TRUE и FALSE при нажатии на соответствующие кнопки.

Может ли кто-нибудь подсказать, каким путем мне нужно идти, чтобы я мог получить доступ к своей функции так же, как в окне подтверждения JS:

Точно так же, как :

 if(confirm_box(title, text))
{
 alert('Yes');
}
else
{
 alert('No');
}
  

это не сработает. в принципе, вы можете использовать собственный

if (confirm("are you sure")) { ... } else { ... }

и это нормально, потому что это блокирует поток пользовательского интерфейса…

если вы хотите реплицировать окно подтверждения, вам нужно вместо этого работать с методом обратного вызова события, поскольку ваша функция НЕ будет иметь возвращаемого значения.

в псевдокоде это будет:

 var confirm_box = function(title, text, onConfim, onCancel) {

    ... 
    confirmEl.addEvent("click", onConfirm);

    cancelEl.addEvent("click", onCancel);
};


confirm_box("Are you sure?", "Please confirm by clicking below", function() {
    alert("yes");
}, function() {
    alert("no");
});
  

в контексте mootools и классов вы можете захотеть создать класс подтверждения, который вместо этого работает с событиями. Если вам нужен пример, дайте мне крик.