vertical - onclick tab jquery

Pestañas JQuery UI-Mensaje "Cargando..."

Question

Todas,

Estoy usando pestañas anidadas Jquery UI. Me preguntaba si hay alguna forma de mostrar una imagen de AJAX Spinner al lado del texto de la pestaña, mientras se carga la pestaña. No quiero cambiar el texto de la pestaña a "Cargando ...". Tenga en cuenta que cuando varias pestañas se cargan al mismo tiempo o una después de la otra, la imagen del girador debe mostrarse junto a cada pestaña de carga.

¿Alguna sugerencia?

Gracias

Answer 1

Balu, recientemente necesitaba algo similar. En mi proyecto, quería que las pestañas mantuvieran el título de la pestaña, pero añadí una animación tipo carga de ajax. Esto es lo que utilicé:

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

La opción "girar" elimina el efecto "Cargando ..." al hacer clic en la pestaña. El evento "seleccionar" nos permite obtener la pestaña seleccionada y anexar un nuevo lapso que contenga la animación. Una vez que el contenido se ha cargado, utilizamos el evento "cargar" para eliminar la animación. Para evitar que los clics de usuarios múltiples destruyan las pestañas, eliminamos () todas las animaciones de cualquier pestaña que seleccione.

¿Ya resolviste este problema? Si es así, comparte la solución.

Answer 2

En jQuery UI v1.12 puede usar el controlador beforeLoad:

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

Answer 3

Si está utilizando el almacenamiento en caché para sus pestañas, entonces esta solución es una mejor opción, solo muestra la carga de ajax si el contenido no está ya en la página.

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

Usé un método diferente para esto yo mismo. Quería que los títulos de las pestañas permanecieran como estaban y que tuvieran la información de "carga" en la pestaña en sí.

La forma en que lo hice es la siguiente:

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

Al igual que el póster anterior, utilicé el método giratorio para evitar que se cambien los títulos de las pestañas. El evento select se activa cuando se selecciona una nueva pestaña, así que obtuve el ID de la pestaña actualmente seleccionada y agregué uno para crear una variable que haría referencia a los DIVs en los que se carga el contenido de ajax por defecto.

Una vez que tenga la identificación, todo lo que necesita hacer es reemplazar el código HTML dentro de la DIV con su mensaje de carga. Cuando el Ajax finalice, lo reemplazará nuevamente por usted con el contenido real.