2011-01-13 22 views
0

我写了一个轻量级的jquery插件来管理标签切换,它在开发和测试中运行良好。我有一个奇怪的要求,其中一个选项卡在打开时展开高度,然后在关闭时收缩高度。这些更改必须是动画,使用在制表符切换完成时触发的回调可轻松完成开幕。如何从回调中延迟插件执行?

但是,我不能得到闭幕动画的工作,这是由于插件继续并在动画完成之前隐藏选项卡。

无论如何,我可以强制插件暂停,直到回调函数完成?

我用火回调的代码是

if($.isFunction(params.click)){ 
    params.click.apply(this,[content,tab,set]); 
}; 

我真的不想下去管理的动画之路,插件

+0

你能不发送回调原来的回调? – RobertPitt

+0

我曾经想过,但我的公司可能会开始在更多的地方使用这个插件,它的大部分插件将在回调中写入,我不确定这真的是我想要如何处理它,但如果一切都失败了,这是一种可能性。 – SigInTheHead

回答

0

如果插件知道哪个选项卡当前“打开”,则在关闭另一个选项卡的同时打开新选项卡。

因此,如果您有权调用客户端代码提供的回调函数,打开新选项卡,您肯定需要在先前打开的选项卡上调用“关闭”回调函数?

+0

是的,但是在关闭回调中,客户端代码正在运行一个动画,因为该运行插件会隐藏当前打开的选项卡以及正在运行的动画。因为在客户端代码中实例化的动画我不能使用正常的jquery.animate完成回调来阻止插件运行我本质上想要做的是以同步方式运行关闭回调,即插件暂停直到回调完成 – SigInTheHead

+0

你不应该有一个实际的停顿,由于可用性的原因,这将是一个可怕的想法;并且一半回答了原始问题,但没有用于暂停jQuery插件执行的API。我建议你有回调'tabClos​​ing'和'tabOpening',当用户选择一个新标签的时候,这两者都会被触发。我会通过回答更新,以便如何使用它来创建后续效果。 –

0

为选项卡的打开和关闭创建回调,以便每当用户更改选项卡时,将为新选项卡触发tabOpening事件,并为旧选项卡调用tabClosing事件。

在您的文档中明确哪些将首先发生,以便使您的插件变得简单!假设tabClosing会先触发然后你可以编写客户端代码如下:

var $closingTab = null, 
    $openingTab = null; 

$('#target').yourPlugin({ 
    tabClosing: function(tab) { 
     $closingTab = $(tab); 
    }, 
    tabOpening: function(tab) { 
     $openingTab = $(tab); 
     // Animate the 
     $closingTab.animate({}, 1000, function() { 
      $openingTab.animate({}, 1000); 
     }); 
    } 
}); 

或者更简单地说,但不原始地,你可以有一个tabChange回调可能ecapsulate整个事件:

$('#target').yourPlugin({ 
    tabChange: function(oldTab, newTab) { 
     $(oldTab).animate({}, 1000, function() { 
      $(newTab).animate({}, 1000); 
     }); 
    } 
}); 
+0

首先谢谢你的回复,当我说插件重量轻时,我确实是这么想的。如果我像上面描述的那样做,那么很多插件都是多余的。我开始认为这段代码只需要添加到网站的主脚本文件中。 – SigInTheHead