Schede dell'interfaccia utente JQuery - Messaggio "Caricamento in corso ..."

Question

Tutti,

Sto utilizzando le schede nidificate dell'interfaccia utente di Jquery. Mi stavo chiedendo se c'è un modo per visualizzare un'immagine AJAX Spinner accanto al testo della scheda, mentre la scheda si sta caricando. Non voglio modificare il testo della scheda in "Caricamento in corso ..". Considera che quando si caricano più schede contemporaneamente o una dopo l'altra, l'immagine dello spinner deve essere visualizzata accanto a ciascuna scheda di caricamento.

Qualsiasi suggerimento?

Grazie

Answer 1

Balu, di recente ho bisogno di qualcosa di simile. Nel mio progetto, volevo che le schede conservassero il titolo della scheda, ma aggiungo un'animazione di tipo caricamento ajax. Ecco cosa ho usato:

$(".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'opzione "spinner" rimuove l'effetto "Caricamento in corso ..." facendo clic sulla scheda. L'evento "select" ci consente di ottenere la scheda selezionata e aggiungere una nuova estensione contenente l'animazione. Una volta caricato il contenuto, utilizziamo l'evento "load" per rimuovere l'animazione. Per impedire a più clic dell'utente di distruggere le schede, rimuoviamo() tutte le animazioni su qualsiasi selezione di schede.

Hai già risolto questo problema? Se è così, per favore condividi la soluzione.

Answer 2

Ho usato un metodo diverso a questo me stesso. Volevo che i titoli delle schede rimanessero invariati e che avessero le informazioni di "caricamento" nella scheda stessa.

Il modo in cui l'ho fatto è il seguente:

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

Come la recensione precedente, ho usato il metodo di selezione per evitare che i titoli delle schede venga modificata. L'evento select si attiva quando viene selezionata una nuova scheda, quindi ho ottenuto l'ID della scheda attualmente selezionata e ne ho aggiunto uno per creare una variabile che faccia riferimento ai DIV in cui il contenuto di Ajax è caricato per impostazione predefinita.

Una volta ottenuto l'ID, tutto ciò che devi fare è sostituire l'HTML all'interno del DIV con il messaggio di caricamento. Una volta completato l'Ajax, lo sostituirà di nuovo con il contenuto effettivo.

Answer 3

Se si utilizza la memorizzazione nella cache per le schede, questa soluzione è probabilmente più adatta, mostra solo il caricamento Ajax se il contenuto non è già nella pagina.

$(".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>") 
    } 
    } 
}) 

Answer 4

In jQuery UI v1.12 è possibile utilizzare il beforeLoad Handler:

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