2009-11-12 53 views
6

Todo,pestañas precarga jQuery UI en el fondo

¿Cómo puedo cargar previamente todas las pestañas jQuery UI mientras que la primera pestaña todavía 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

Respuesta

10

intentar 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 vuelven a cargar después de que se han cargado una vez. A continuación, descubre el número total de pestañas y establece la siguiente pestaña para cargar 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.

+0

Esto funciona muy bien! Gracias. ¿Es posible precargar varias pestañas a la vez, en lugar de cargarlas una tras otra? Además, ¿es posible poner una imagen giratoria al lado del texto de la pestaña? No quiero que se muestre "Cargando ...". Debería ser solo el texto de la pestaña junto con la imagen del rotador mientras se carga la pestaña .. Gracias de antemano .. – Balu

+0

El texto del rotador es una opción para enviar a ui.tabs: $ abs = $ ('# tabs'). pestañas ({ caché: true, spinner: '' }); – Lathan

+0

¿quiere decir que las pestañas están indexadas comenzando con 1? De lo contrario, este código parece que nunca cargará la pestaña 2, ya que se incrementa antes de llamar a la carga – Andrey

0

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) { 
     } 
    } 
}); 
+0

. ¿No volvería a cargar todas las pestañas siguientes cada vez que haga clic en una diferente? Así que digo que reviso las pestañas de a una por vez. Cuando hago clic en la primera pestaña, se cargarán todas las pestañas. Luego, cuando hago clic en la segunda pestaña, todas las pestañas después de 2 se cargarán *** de nuevo ***. – Travesty3

Cuestiones relacionadas