Вкладки JQuery UI - сообщение "Загрузка..."

Все,

Я использую вложенные вкладки JQuery UI. Мне просто интересно, есть ли способ отобразить изображение AJAX Spinner рядом с текстом вкладки, а вкладка загружается. Я не хочу менять текст вкладки на "Загрузка..". Учтите, что, когда несколько вкладок загружаются одновременно или один за другим, изображение с прядильным устройством должно отображаться рядом с каждой вкладкой загрузки.

Любые предложения?

Спасибо

Ответ 1

Если вы используете кеширование для своих вкладок, то это решение лучше подходит, оно показывает только загрузку ajax, если контент еще не на странице.

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

Ответ 2

Я использовал для этого другой метод. Я хотел, чтобы заголовки табуляции оставались такими, какими они были, и имеют информацию о загрузке на самой вкладке.

То, как я это сделал, выглядит следующим образом:

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

Как и предыдущий плакат, я использовал метод spinner для предотвращения изменения названий вкладок. Событие select срабатывает при выборе новой вкладки, поэтому я получил идентификатор выбранной в данный момент вкладки и добавил ее для создания переменной, которая будет ссылаться на DIV, в которых по умолчанию загружается содержимое ajax.

Как только у вас есть идентификатор, все, что вам нужно сделать, это заменить HTML внутри DIV на ваше загрузочное сообщение. Когда Ajax завершится, он снова заменит его фактическим контентом.

Ответ 3

Балу, мне недавно нужно было что-то подобное. В моем проекте я хотел, чтобы вкладки сохраняли заголовок вкладки, но добавляли анимацию типа ajax-load. Вот что я использовал:

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

Опция "spinner" удаляет эффект "Loading..." при щелчке по вкладке. Событие "select" позволяет нам получить выбранную вкладку и добавить новый диапазон, содержащий анимацию. После загрузки содержимого мы используем событие "load" для удаления анимации. Чтобы предотвратить множественные клики пользователей от уничтожения вкладок, мы удаляем() все анимации при выборе любой вкладки.

Вы уже решили эту проблему? Если да, пожалуйста, поделитесь решением.

Ответ 4

В jQuery UI v1.12 вы можете использовать обработчик beforeLoad:

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