Помощь начинающим веб
разработчикам

Стилизация 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 после внесения своих настроек

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

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

Добавить комментарий

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии