JQuery UI Tabs - "Chargement..." message

si vous utilisez la mise en cache de vos onglets, alors cette solution est probablement mieux adaptée, elle ne montre le chargement ajax que si le contenu n'est pas déjà sur la page.

$(".tabs").tabs({
   cache:true,
   load: function (e, ui) {
     $(ui.panel).find(".tab-loading").remove();
   },
   select: function (e, ui) {
     var $panel = $(ui.panel);

     if ($panel.is(":empty")) {
         $panel.append("<div class='tab-loading'>Loading...</div>")
     }
    }
 })

j'ai moi-même utilisé une méthode différente. Je voulais que les titres des onglets restent comme ils étaient, et avoir l'information de "chargement" dans l'onglet lui-même.

je L'ai fait il est comme suit:

    $("#matchTabs").tabs({
      spinner: "",
      select: function(event, ui) {
        var tabID = "#ui-tabs-" + (ui.index + 1);
        $(tabID).html("<b>Fetching Data.... Please wait....</b>");
      }
    });

comme l'affiche précédente, j'ai utilisé la méthode spinner pour empêcher les titres des onglets d'être changés. L'sélectionnez l'événement se déclenche lorsqu'un onglet est sélectionné, j'ai donc eu l'ID de l'onglet actuellement sélectionné et ajouté à créer une variable qui fait référence au DIVs dans dont le contenu ajax est chargé par défaut.

Une fois que vous avez L'ID, tout ce que vous avez à faire est de remplacer le HTML dans le DIV avec votre message de chargement. Lorsque L'Ajax sera terminé, il le remplacera à nouveau pour vous avec le contenu réel.

Balu, j'ai récemment eu besoin de quelque chose de similaire. Dans mon projet, je voulais que les onglets conservent le titre de l'onglet, mais ajouter une animation de type ajax-loading. Voici ce que j'ai utilisé:

$(".tabs").tabs({ spinner: '',
                select: function(event, ui) { 
                    $(".tabs li a .loader").remove();
                    $(".tabs li a").eq(ui.index).append("<span class='loader'><img src='images/ajax-loader.gif'/></span>"); 
                    },
                load: function(event, ui) { $(".tabs li a").eq(ui.index).find(".loader").remove(); }
                });

l'option" spinner "supprime le chargement"..."effet sur, cliquez sur l'onglet. L'événement "select" nous permet d'obtenir l'onglet sélectionné et d'ajouter une nouvelle portée contenant l'animation. Une fois le contenu chargé, nous utilisons l'événement "load" pour supprimer l'animation. Pour éviter des clics d'utilisateur multiples de en détruisant les onglets, nous supprimons() toutes les animations sur n'importe quel onglet sélectionné.

Avez-vous déjà résoudre ce problème? Si c'est le cas, veuillez partager la solution.

In jQuery UI v1.12 Vous pouvez utiliser le Handler beforeLoad:

$('#tabs').tabs({                
beforeLoad: function(event, ui) {
    ui.panel.html('Loading')
}
});