Wie kann ich die Ausführung eines Plugins von einem Rückruf verzögern?

Question

Ich habe ein leichtes jquery-Plugin geschrieben, um Tab-Wechsel zu verwalten, es hat gut in Entwicklung und Tests funktioniert. Ich hatte eine seltsame Anforderung für eine der Registerkarten, um beim Öffnen die Höhe zu vergrößern und dann beim Schließen die Höhe zu verkleinern. Die Änderungen müssen eine Animation sein, das Öffnen erfolgt einfach über einen Rückruf, der ausgelöst wird, wenn die Tab-Umschaltung abgeschlossen ist.

Ich kann jedoch nicht erreichen, dass die schließende Animation funktioniert, dies liegt daran, dass das Plugin die Registerkarte fortsetzt und versteckt, bevor die Animation abgeschlossen ist.

Gibt es trotzdem ich kann das Plugin zwingen zu pausieren, bis eine Callback-Funktion abgeschlossen ist?

Der Code, den ich den Rückruf zu feuern bin mit ist

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

Ich will nicht wirklich den Weg der Verwaltung von Animationen im Plugin

Answer 1

gehen Wenn Sie kennt Plugin die Registerkarte derzeit "geöffnet", dann erfolgt das Öffnen eines neuen Tabs gleichzeitig mit dem Schließen eines anderen Tabs.

Wenn Sie also eine Callback-Funktion aufrufen können, die vom Client-Code bereitgestellt wird, müssen Sie zum Öffnen eines neuen Tabs sicher einen "Closing" -Rückruf auf dem zuvor geöffneten Tab aufrufen?

Answer 2

Erstellen Sie einen Rückruf für das Öffnen und Schließen von Registerkarten. Wenn ein Benutzer die Registerkarte ändert, wird das Ereignis tabOpening für die neue Registerkarte ausgelöst, und das tabClosing-Ereignis wird für die alte Registerkarte aufgerufen.

Spezifizieren Sie in Ihrer Dokumentation, welche zuerst auftreten wird, um die Verwendung Ihres Plugins einfach zu machen! Vorausgesetzt, dass tabClosing würde Feuer zuerst könnten Sie dann Client-Code wie folgt schreiben:

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); 
     }); 
    } 
}); 

Oder einfach mehr, aber weniger primitiv könnten Sie einen tabChange Rückruf haben, die die gesamte Veranstaltung ecapsulate könnte:

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