Помощь начинающим веб
разработчикам
Для связи
  • статья
  • pantey

Стилизация Ajax Throbber в Drupal 7. Примеры реализации.

↓
Главная / Статьи / Стилизация Ajax Throbber в Drupal 7. Примеры реализации.
09.12.2015

Для тех, кто активно использует Ajax, при разработки своих приложений, не редко встает вопрос стилизации прелоадера выполнения Ajax. Прелоадер – это некий элемент, который, как правило, визуально сообщает пользователю о выполнении ajax команды. По умолчанию в Drupal – прелоадер выглядит так:

Ajax прелоадер по умолчанию

Но, как правило, данный элемент почти всегда стилизуется. Самый простой способ стилизации – это CSS. За стиль данного элемента отвечают следующие классы CSS:

  • .ajax-progress
  • .ajax-progress-throbber
  • .ajax-progress-throbber .message
  • .ajax-progress-throbber .throbber

Путем не хитрого CSS – мы может добиться отображение прелоадера с затемнением экрана и отображением кастомного визуального элемента.

Изменили стиль прелоадера с помощью CSS CSS: 
  1. .ajax-progress .message,
  2. .ajax-progress-throbber .message{
  3.   color: white;
  4.   font-size: 20px;
  5.   padding: 30px;
  6. }
  7. .ajax-progress .throbber,
  8. .ajax-progress-throbber .throbber {
  9.   float: none;
  10.   margin: 400px auto 0 auto;
  11.   width: 64px;
  12.   height: 64px;
  13.   background: url("../images/preloader.gif") no-repeat center center;
  14. }
  15. .ajax-progress,
  16. .ajax-progress-throbber {
  17.   width: 100%;
  18.   height: 100%;
  19.   background-color: rgba(255, 255, 255, 0.7);
  20.   position: fixed;
  21.   top: 0;
  22.   left: 0;
  23.   z-index: 4444;
  24.   vertical-align: middle;
  25.   text-align: center;
  26. }

Не забудьте только переписать путь до вашего изображения прелоадера. Для выполнения анимации на CSS3 вам в любом случае не обойтись без JS. Например, в качестве анимации будем использовать масштабирование (scale).

То, CSS примет следующий вид:

  1. .overlay-ajax{
  2.   position:fixed;
  3.   z-index:4444;
  4.   width:100%;
  5.   height:100%;
  6.   top:0;
  7.   left:0;
  8.   background:#fff;
  9.   background:rgba(255, 255, 255, 0.9);
  10.   opacity:0;
  11.   visibility:hidden;
  12.   transform:scale(0.5);
  13.   -webkit-transform:scale(0.5);
  14.   -ms-transform:scale(0.5);
  15.   -o-transform:scale(0.5);
  16.   -moz-transform:scale(0.5);
  17.   transition:all ease 0.5s;
  18.   -webkit-transition:all ease 0.5s;
  19.   -ms-transition:all ease 0.5s;
  20.   -o-transition:all ease 0.5s;
  21.   -moz-transition:all ease 0.5s;
  22.   background-image: url(../images/preloader.gif);
  23.   background-repeat: no-repeat;
  24.   background-position: center;
  25. }
  26.  
  27. .overlay-ajax.active{
  28.   opacity:1;
  29.   visibility:visible;
  30.   transform:scale(1);
  31.   -moz-transform:scale(1);
  32.   -webkit-transform:scale(1);
  33.   -ms-transform:scale(1);
  34.   -o-transform:scale(1);
  35. }

А в ваш файл JS необходимо внести следующий код, который будет отслеживать запуск и завершение Ajax команды 

  1. (function($, Drupal) {
  2.   Drupal.behaviors.theme = {
  3.     attach:function() {
  4.  
  5.       if(typeof(ajaxinit) == 'undefined'){
  6.  
  7.         // Add Overlay
  8.         $('body').append('<div class="overlay-ajax"></div>');
  9.  
  10.         // Start ajax command
  11.         $(document).ajaxSend(function() {
  12.           $('.overlay-ajax').addClass('active');
  13.         });
  14.  
  15.         // End ajax command
  16.         $(document).ajaxSuccess(function() {
  17.           $('.overlay-ajax').removeClass('active');
  18.         });
  19.       }
  20.       ajaxinit = true;
  21.  
  22.     }
  23.   };
  24. }(jQuery, Drupal));

Из имеющихся модулей, для стилизации прелоадера – я предпочитаю Ajax Throbber. Который по умолчанию делает все-то, что нам необходимо.

Стилизация прелоадера с помощью модуля Ajax Throbber

Он не имеет интерфейса для выбора своих параметров стилизации. Все значения заносятся программно.

Список параметров:
  • ajax_throbber_selection - позволяет изменить изображение прелоадера. Допустимые значения:
    • circle
    • three_dots
    • square
    • fading_circle
  • ajax_throbber_bg_color - позволяет изменить бэкграунд оверлея.
  • ajax_throbber_item_color - позволяет изменить цвет изображения прелоадера.

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

Для этого нам понадобится hook_preprocess_page() 

  1. <?php
  2. /**
  3. * Implements hook_preprocess_page()
  4. */
  5. function hook_preprocess_page(&$variables){
  6. // Ajax throbber settings
  7. variable_set('ajax_throbber_selection', 'square');
  8. variable_set('ajax_throbber_bg_color', '0,0,0, 0.8');
  9. variable_set('ajax_throbber_item_color', '255,0,5, 0.5');
  10. }
Ajax Throbber после внесения своих настроек

На самом деле решений данного вопроса очень много, если у вас есть универсальное средство стилизации, то буду рад услышать.

ajax throbber
-->

Похожие статьи

Список значений «info» файла

Выводим форму модуля webform в popup окно модуля fancybox

Drupal 8 – Создание ajax ссылки

Добавляем пункт «разделителя» в меню Drupal 7.

Выводим вместо текстового поля ноды изображение с данным текстом

Создание своего шаблона для Drupal 7 на примере. Вывод блоков. Часть 3.

PHP сниппет, как им пользоваться в drupal?

Устанавливаем плагин Uppod для редактора Ckeditor

Файл html.tpl.php в Drupal 7

Мини галерея для сайта под Drupal 7. Модуль Gamma.

Выводим аватар пользователя на страницу с применением стиля изображения.

Вывод контента в модальное окно через Ajax. Модуль ajaxcontent.

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.