所以我正在使用带有JS_Growl插件的Mootools,它运行良好,但是在页面提交有用之前,我无法让通知挂起很长时间。
示例here…
是否有某种类型的回调给Growl插件,以便当通知“完成”时,我可以进行重定向?
或许也许有一些方法可以在我成功提交后再返回页面然后提出通知时进行检测?您可以看到我正在向购物车页面提交物品ID,然后将其发回给我。
任何建议都将不胜感激。我的Javascript非常基础,所以可视代码示例是理想的。
提前感谢!
答案 0 :(得分:0)
您是否阅读过源代码?这是一个非常古老的插件,匆忙组合并修补,因此它适用于MooTools 1.2。他们甚至不使用Class。因此,没有事件混合。也没有回调。
/*
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
这是一个类似且更灵活的插件列表:
玩得开心。