Как отобразить «загрузка» до загрузки содержимого из вкладок JQuery

Question

Я использую вкладки пользовательского интерфейса jquery, и содержимое, загруженное во вкладку, находится на другой странице. поэтому он загружается через ajax. Между загрузкой страницы существует некоторая задержка, во время которой часть экрана, на которую будет загружаться содержимое вкладки, совершенно пуста. Есть ли способ показать какое-либо сообщение типа «загрузка ...», пока содержимое не загрузится?

Мой код:

<script type="text/javascript">
    $(function(){
        $("#tabs").tabs();
    });
</script>

            <div id="tabs">
                <ul>
                    <li><a href="/failedPrescreenReport.jsp</a></li>
                    <li><a href="/failedverificationreport.jsp</a></li>
                    <li><a href="VerificationReport.action</a></li>
                </ul>
            </div>

Я пытался использовать опцию spinner этого плагина, но, похоже, это не работает для меня ... (возможно, мой css испорчен)

Answer 1

Нет необходимости делать лишние вещи, просто добавьте тег span в свои якоря. я думаю, что это пропущено в документации jQuery.

пример:

<script type="text/javascript">
    $(function(){
        $("#tabs").tabs();
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="/failedPrescreenReport.jsp"><span>Tab 1</span></a></li>
        <li><a href="/failedverificationreport.jsp"><span>Tab 2</span></a></li>
        <li><a href="VerificationReport.action"><span>Tab 3</span></a></li>
    </ul>
</div>

span теги являются важной частью.

Answer 2

Я бы порекомендовал прослушивать события jquery ajaxStart, ajaxStop и ajaxError, отображая всплывающее окно «загрузки» на ajaxStart, скрывая его на AjaxStop и ajaxError. Таким образом, ваше всплывающее окно загрузки будет отображаться всякий раз, когда запрос ajax находится в ожидании без какого-либо дополнительного программирования.

Например:

$(function() {
  $(this).ajaxStart(function() {
    $("#ajaxLoading").show(); });
  $(this).ajaxStop(function() {
    $("#ajaxLoading").hide(); });
 });

Answer 3

Лучшая вещь, которую я сделал, была только для вкладок, управляемых ajax ... Надеюсь, вам понравится этот ответ

$ ("# facilityTabContainer"). Tabs ({ panelTemplate: "Загрузка ..." , выбрано: 0, прокручиваемый: правда, кеш: false});

и вы даже можете изменить panelTemplate в jquery.ui.tabs, чтобы все вкладки в вашем приложении автоматически получали «загрузку текста или изображения». и угадайте, что также решает вашу первую проблему с загрузкой вкладок ..

Answer 4

blockUI отлично, но я бы держал пари http://plugins.jquery.com/project/loading лучше подходит для ситуации.

Answer 5

JQuery blockui идеально подходит для этого. Очень быстрое, элегантное решение.

Answer 6

Только что написал плагин jquery , что может быть полезно. Он помещает маску со спиннером над элементом, поэтому для ваших вызовов ajax вы можете отобразить маску перед вашими вызовами и, например, снять маску в функции обратного вызова.