【问题标题】:MooTools function return valueMooTools 函数返回值
【发布时间】:2011-10-11 12:55:49
【问题描述】:

我正在开发 MooTools 确认框功能。其中我有两个按钮,分别是 OK 和 CANCEL。

所以我想在单击 OK 时返回 TRUE,并在单击 CANCEL 时返回 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();
}

我已经在点击相应的按钮时返回 TRUE 和 FALSE。

任何人都可以建议我必须走哪条路,这样我就可以像 JS 确认框一样访问我的功能:

就像:

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

【问题讨论】:

    标签: javascript mootools mootools1.2


    【解决方案1】:

    这是行不通的。基本上,你可以使用原生的

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

    这很好,因为它阻塞了 UI 线程...

    当您想要复制确认框时,您需要使用事件回调方法,因为您的函数不会有返回值。

    在伪代码中,这将是:

    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 和 Classes 的上下文中,您可能想要做一个与事件一起工作的确认类。如果你想要一个例子,请给我一个喊叫。

    【讨论】:

    • 我刚刚扩展了我的一个旧模式类来处理这个问题。 jsfiddle.net/dimitar/s538U/1 vs jsfiddle.net/dimitar/s538U(原模态框)
    • 事实上,更精致一些。 jsfiddle.net/dimitar/s538U/4 - 一段时间以来一直想向我们的后台添加确认功能。 :)
    • 这并不是为了解决您的问题,而是展示了异步期望和事件驱动操作的概念。该类本身是我正在编写的内部东西,但它不受支持/不打算在任何地方用于生产。我给你的原始回复应该足以用你自己的已经为你工作的函数重现相同的函数。
    • 非常感谢问题解决了,我记得在 1.5 年前你以同样的方式帮助了我。再次感谢... :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-09-15
    • 1970-01-01
    • 2021-09-10
    • 2011-10-15
    • 2018-01-22
    相关资源
    最近更新 更多