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

Drupal → Создать свой ajax индикатор прогресса

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

Пример создания индикатора прогресса с именем toggleClass, который добавляет/удаляет класс у элемента:

(function ($, Drupal) {
 
  /**
   * Create custom progress type "toggleClass".
   * @see Drupal.Ajax.prototype.beforeSend()
   */
  Drupal.Ajax.prototype.setProgressIndicatorToggleclass = function () {
    var $progressTarget = this.progress.target ? $(this.progress.target) : $(this.element);
    var progressClass = this.progress.class ? this.progress.class : 'ajax-progress-animation';
 
    // Add class
    $progressTarget.addClass(progressClass);
 
    // Remove class
    this.progress.object = {
      stopMonitoring: function () {
        $progressTarget.removeClass(progressClass);
      }
    };
  };
 
})(jQuery, Drupal);

Использовать так:

$form['submit'] = [
  ...
  '#ajax' => [
    ...
    'progress' => [
      'type' => 'toggleClass',
      'target' => '.example-form .form-email',
      'class' => 'ajax-progress-animation',
    ],
  ],
];

Версия для Drupal 7

Написанное актуально для Drupal 8
Похожие записи

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

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

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