咆哮式通知时间问题

Question

所以我正在使用 Mootools 和 JS_Growl 插件，该插件运行良好，但在页面提交有用之前，我无法让通知停留足够长的时间。

例如here…

是否有某种对 Growl 插件的回调，以便当通知“完成”时，我可以进行重定向？

或者，当我在成功提交后返回页面然后发出通知时，也许有某种方式可以感知？您可以看到我正在将商品 ID 提交到购物车页面，然后该页面将我发回。

任何建议将不胜感激。我的 Javascript 非常基础，因此可视化代码示例非常理想。

提前致谢！

Answer 1

你读过源代码吗？这是一个非常老的插件，匆忙拼凑和修补，所以它可以与 MooTools 1.2 一起使用。他们甚至不使用Class。因此，没有Events mixin。也没有回调。

/*
JS_Growl Mootools based notifier
Version 0.2
Developed and maintained by Carlos Ouro
http://techtrouts.com
*/
JS_Growl={
    //user callable properties / funcionalities
    notify:function(str){
        if(!this._v.initiated) this._a.init();
        var el=new Element('div',{
            'class':(Browser.Engine.name=='trident' && Browser.Engine.version<5)?'JS_Growl_notify_IE6':'JS_Growl_notify',
            'html':str
        });
        el.inject(this._o.container);
        var fx= new Fx.Morph(el, {
            'duration': 'short'
        });
        fx.set({
            'opacity':0,
            'display':'block'
        });
        fx.start({
            'opacity':[0,1]
        });
        setTimeout(function(){
            fx.start({
                'opacity':[1,0]
            }).chain(function(){
                this.options.durtion='long';
                this.start({
                    'height':0,
                    'padding-top':0,
                    'padding-bottom':0,
                    'margin-top':0,
                    'margin-bottom':0
                }).chain(function(){
                    el.destroy();
                });
            });
        }, 2500);
    },

    //internal structure "à la fallforward ( http://fallforwardgame.com )"
    _v:{
        initiated:false
    },
    _a:{
        init:function(){
            JS_Growl._o.container=new Element('div', {'id':'JS_Growl_container'});
            JS_Growl._o.container.inject(document.body);
            JS_Growl._v.initiated=true;
            if(Browser.Engine.name=='trident' && Browser.Engine.version<5){                         
                //position "fixed"
                JS_Growl._o.container.setStyle({'position':'absolute'});
                JS_Growl._a.ie6_pos();
                window['addEvent']('scroll', JS_Growl._a.ie6_pos);
                window['addEvent']('resize', JS_Growl._a.ie6_pos);
            }
        },
        ie6_pos:function(){
            JS_Growl._o.container.setStyles({'top':Window.getScrollTop()+'px', 'left':Window.getWidth()+'px'});
        }
    },
    _o:{
        "container":null
    }
}

考虑到这有多小，重构它以完成您需要的工作应该只需几分钟 - 10 到 15 分钟左右。

但是，您可以更轻松地解决此问题 - 在单击添加到购物篮时停止提交事件。等待一段时间以看到通知，例如 2.5 秒。重新提交或更改location.href

这是一个类似且更灵活的插件列表：

• http://mootools.net/forge/p/growler
• http://mootools.net/forge/p/notimoo

玩得开心。