xandeadx.ru Блог музицирующего веб-девелопера

Drupal → Показать процесс загрузки ajax таба в Quicktabs 7.x-3.x

Опубликовано в

Quicktabs для Drupal 6 довольно красиво показывал в области контента процесс загрузки ajax таба:

В версии же для Drupal 7 процесс загрузки показывается с помощью throbber-а возле активного таба, что по моему ужасно (контент при этом просто пропадает, а табы скачут):

Делаем по-старому:

1. Добавляем в js файл темы:

(function ($) {
  Drupal.behaviors.THEMENAME= {
    attach: function (context, settings) {
      $('.quicktabs-tabs a:not(.quicktabs-loaded)', context).click(function() {
        if ($(this).hasClass('progress-disabled')) {
          $(this).closest('.quicktabs-wrapper').addClass('quicktabs-loading');
        }
      });
      if ($(context).hasClass('quicktabs-tabpage')) {
        $(context).closest('.quicktabs-wrapper').removeClass('quicktabs-loading');
      }
    }
  };
})(jQuery);

2. Добавляем в css файл темы:

.quicktabs-tabs .ajax-progress {
  display: none;
}
.quicktabs-loading .quicktabs_main {
  height: 30px;
  margin-top: 20px;
  background: url(/misc/progress.gif);
}

Результат:

Написанное актуально для Quicktabs 7.x-3.x
Похожие записи

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании