Вкладки пользовательского интерфейса JQuery - сообщение «Загрузка ...»

Question

All

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

Есть предложения?

Спасибо

Answer 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>")
     }
    }
 })

Answer 2

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

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

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

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

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

Answer 3

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

$(".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» удаляет эффект «Загрузка ...» при нажатии вкладки. Событие «select» позволяет нам получить выбранную вкладку и добавить новый диапазон, содержащий анимацию. Как только контент загружен, мы используем событие «load» для удаления анимации. Чтобы предотвратить разрушение вкладок несколькими щелчками пользователей, мы удаляем () все анимации на выбранных вкладках.

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

Answer 4

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

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