Optimisation de jQuery pour les onglets

Question

Je suis en train de développer un widget. Le widget comporte trois onglets implémentés de la manière suivante. Le problème que j'ai est que le code jquery qui a écrit est très lent. Si l'utilisateur modifie rapidement les onglets, le widget devient béant et s'enlise. Cela provoque l'alignement des onglets avec les données affichées et un décalage général. Je crois que c'est parce que l'onglet est changé avant que $ .load() soit fini. J'ai essayé de mettre en œuvre ce qui suit:

("#tabs li a").click(function() 
{ 
$("#tabs li.active").removeClass("active"); 
    $("#tab_content").load($(this).attr('href'), function(){ 
     $(this).parent().addClass("active"); 
    }); 

    return false; 
}); 

Je crois comprendre que la fonction de rappel au sein de la fonction de charge n'exécute pas jusqu'à ce que la fonction de charge est terminée. Je pense que cela résoudrait mon problème, mais je ne peux pas trouver un moyen de sélectionner l'onglet correct qui a été cliqué dans la fonction de rappel. Si ce n'est pas le moyen de le faire, quelle est la meilleure façon de mettre en œuvre ces onglets afin qu'ils arrêtent de charger une ancienne requête et de charger la dernière sélection d'onglet par l'utilisateur?

Merci

Answer 1

Peu importe si vous devez utiliser les onglets de l'interface utilisateur jQuery ou non, cela est la façon dont votre code pourrait être fait pour travailler

$("#tabs li a").click(function(e) 
{ 
    var fn = function(a) { 
     return function() { 
      $(a).parent().addClass("active"); 
     }; 
    } 
    $("#tabs li.active").removeClass("active"); 
    $("#tab_content").load($(this).attr('href'), fn(this)); 

    return false; 
}); 

Answer 2

Pourquoi ne pas simplement utiliser le jQuery UI Tabs plug-in?