Реализация анимации загрузки с динамическими вкладками jQuery ajax - PullRequest
Новая
       18

Реализация анимации загрузки с динамическими вкладками jQuery ajax

0 голосов
/ 23 ноября 2011

Это было бы легче объяснить, если бы я показал свой код, а затем объяснил, чего я пытаюсь достичь: 

$(document).ready(function() {
    var tabs = $("#tabs").tabs({ spinner: 'Retrieving data...' });
    $(".tabButton").live("click", function(){
        var getTopicID = $('.topicID',$(this).parent()).val();
                $("#tabs").tabs("remove",1);
                $("#tabs").tabs("remove",1);
        tabs.tabs('add', 'ajax.php?section=summary&id=' + getTopicID, 'Summary');
        tabs.tabs('add', 'ajax.php?section=read&id=' + getTopicID, 'Read Topic');
    });
    $(".tabButton").click(function(){
        $(".liSelected").removeClass("liSelected");
        $(this).parent().addClass("liSelected");
    });
});

Важная строка такова: 

tabs.tabs('add', 'ajax.php?section=read&id=' + getTopicID, 'Read Topic');

Как видно из исходной строки кода, я использую счетчик, но мне хотелось бы получить более очевидное указание на то, что PDF-файл загружается (некоторые из них имеют довольно большой размер и могут занимать довольно много времени) секунд, в зависимости от скорости соединения с конечным пользователем).

Мой идеальный внешний вид будет выглядеть примерно так: загрузка gif , однако я не представляю себе ни малейшего понятия, как реализовать это в моем коде выше.

Заранее спасибо!

РЕДАКТИРОВАТЬ: я должен заявить, что я хотел бы, чтобы счетчик появился на вкладке, где будет загружен PDF, а не на вкладке вверху.

дальнейшее редактирование: хорошо, так что у меня все работает до определенного момента, но не совсем так, как мне бы хотелось: 

var tabs = $("#tabs").tabs({ spinner: "", select: function(event, ui) { var tabID = "#ui-tabs-" + (ui.index + 2); $(tabID).html("<img src=/design/img/progressBar.gif />"); } });

Таким образом, это добавляет индикатор выполнения на панель вкладок, но я не могу обернуть тег img в какие-либо элементы уровня блока, чтобы центрировать его, поскольку это полностью нарушает функциональность вкладок. Есть идеи?

1 Ответ

0 голосов
/ 23 ноября 2011

Что не так с 

spinner: '<img src="loading_animation.gif" />'

Примечание с сайта jquery

Элемент span должен присутствовать в теге A заголовка, чтобы содержимое счетчика было видно.

Конечно, так как вы используете "Получение данных ...", я подозреваю, что вы уже сделали это.Поместив изображение в опцию Spinner, оно будет отображаться рядом с вкладкой, и это изображение будет довольно большим, поэтому это может стать проблемой.

Другой вариант - воспользоваться плагином tabs.select и load событие

Событие выбора

Срабатывает при нажатии на вкладку 

$( ".selector" ).tabs({
   select: function(event, ui) { ... }
});

или Привязка к событию выборапо типу: tabsselect. 

$( ".selector" ).bind( "tabsselect", function(event, ui) {
  ...
});

Событие загрузки

Инициируется после загрузки содержимого удаленной вкладки. 

$( ".selector" ).tabs({
   load: function(event, ui) { ... }
});

или Привязать к событию загрузки по типу: tabsload. 

$( ".selector" ).bind( "tabsload", function(event, ui) {
  ...
});

Затем вы можете добавить загрузочное изображение в абсолютно позиционированный div внутри области содержимого на tabclick и использовать tabload, чтобы удалить div один раз.содержимое загружено.

...