JQuery UI Tabs - сообщение «Loading ...»

Question

Все,

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

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

Благодаря

Answer 1

Балу, я недавно нужно было что-то подобное. В моем проекте я хотел, чтобы вкладки сохраняли заголовок вкладки, но добавляли анимацию типа 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(); } 
       }); 

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

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

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({ 
    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

В JQuery UI v1.12 вы можете использовать beforeLoad Handler:

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