ejemplos - Precargar las pestañas de la IU de JQuery en el fondo

jquery ui npm

Question

Todas,

¿Cómo puedo precargar todas las pestañas de la IU de JQuery mientras la primera pestaña aún se está cargando? He probado la opción remota: verdadera, pero ¿no funcionó? Debería haber ajax spinners junto a cada nombre de pestaña mientras se cargan las pestañas.

Gracias

Answer 1

Pruebe algo como esto:

$tabs = $(''#tabs'').tabs({
    cache: true
});
var total = $tabs.find(''.ui-tabs-nav li'').length;
var currentLoadingTab = 1;
$tabs.bind(''tabsload'',function(){
    currentLoadingTab++;
    if (currentLoadingTab < total)
        $tabs.tabs(''load'',currentLoadingTab);
    else
        $tabs.unbind(''tabsload'');
}).tabs(''load'',currentLoadingTab);

Inicializa las pestañas con la opción de caché para que las pestañas no se vuelvan a cargar después de haber sido cargadas una vez. A continuación, descubre el número total de pestañas y configura la siguiente pestaña para que se cargue como 1 (las pestañas se indexan empezando por 0) Luego enlaza un evento en el evento de carga para comenzar a cargar la siguiente pestaña hasta que las golpee a todas. Para iniciarlo, carga la segunda pestaña.

Answer 2

Una solución más elegante que la anterior:

$tabs = $(''#tabs'').tabs({
    cache : true,
    load : function(event,ui) {
        try {
            $tabs.tabs(''load'',ui.index+1);
        } catch (e) {
        }
    }
});