Добавление кнопок в уведомление

Библиотека Noty предоставляет возможность включать в уведомления интерактивные элементы — кнопки, которые позволяют пользователю выполнять действия прямо из всплывающего сообщения. Это превращает уведомления из пассивного элемента интерфейса в активный инструмент взаимодействия.

Общий принцип работы

Кнопки добавляются через параметр buttons при создании экземпляра уведомления. Этот параметр принимает массив объектов кнопок, каждая из которых создаётся с помощью конструктора Noty.button.

Базовый синтаксис:

new Noty({
  text: 'Удалить запись?',
  buttons: [
    Noty.button('Да', 'btn btn-success', function () {
      console.log('Удалено');
    }),
    Noty.button('Нет', 'btn btn-danger', function () {
      console.log('Отмена');
    })
  ]
}).show();

Структура кнопки

Метод Noty.button принимает три обязательных аргумента:

  1. Текст кнопки — отображаемая надпись
  2. CSS-класс — оформление кнопки
  3. Обработчик события — функция, вызываемая при нажатии

Расширенная сигнатура:

Noty.button(text, className, onClick, attributes)
  • text — строка
  • className — строка с CSS-классами
  • onClick — функция
  • attributes — объект с дополнительными HTML-атрибутами (необязательно)

Пример с атрибутами:

Noty.button('Открыть', 'btn btn-primary', function () {
  window.open('/dashboard');
}, { id: 'openBtn', 'data-action': 'open-dashboard' });

Управление уведомлением из кнопки

Функция обработчика получает доступ к экземпляру уведомления через this. Это позволяет управлять самим уведомлением, например закрывать его.

new Noty({
  text: 'Сохранить изменения?',
  buttons: [
    Noty.button('Сохранить', 'btn btn-success', function () {
      console.log('Сохранено');
      this.close();
    }),
    Noty.button('Отмена', 'btn btn-secondary', function () {
      this.close();
    })
  ]
}).show();

Ключевой момент: this внутри обработчика — это объект кнопки, но он содержит ссылку на родительское уведомление (this.barDom, this.parent и др.). Чаще всего используется метод this.close().

Отключение автозакрытия

Если уведомление содержит кнопки, логично отключить автоматическое закрытие (timeout), чтобы пользователь успел принять решение.

new Noty({
  text: 'Подтвердите действие',
  timeout: false,
  buttons: [
    Noty.button('ОК', 'btn btn-primary', function () {
      this.close();
    })
  ]
}).show();

Стилизация кнопок

Noty не навязывает конкретные стили, поэтому внешний вид кнопок полностью контролируется через CSS-классы. Часто используется интеграция с CSS-фреймворками, например Bootstrap:

Noty.button('Принять', 'btn btn-success btn-sm', handler);
Noty.button('Отклонить', 'btn btn-danger btn-sm', handler);

Также можно использовать собственные классы:

.my-button {
  background: #4CAF50;
  color: white;
  border-radius: 4px;
  padding: 5px 10px;
}
Noty.button('OK', 'my-button', function () {
  this.close();
});

Несколько кнопок и логика выбора

Уведомление может содержать любое количество кнопок. Часто используется сценарий подтверждения действия:

new Noty({
  text: 'Вы уверены, что хотите выйти?',
  timeout: false,
  buttons: [
    Noty.button('Да', 'btn btn-success', function () {
      console.log('Выход');
      this.close();
    }),
    Noty.button('Нет', 'btn btn-danger', function () {
      this.close();
    }),
    Noty.button('Отмена', 'btn btn-secondary', function () {
      this.close();
    })
  ]
}).show();

Асинхронные действия

Кнопки удобно использовать для запуска асинхронных операций, например AJAX-запросов:

new Noty({
  text: 'Удалить файл?',
  timeout: false,
  buttons: [
    Noty.button('Удалить', 'btn btn-danger', function () {
      fetch('/delete', { method: 'POST' })
        .then(() => {
          console.log('Удалено');
          this.close();
        });
    }),
    Noty.button('Отмена', 'btn btn-secondary', function () {
      this.close();
    })
  ]
}).show();

Важно учитывать, что this внутри then уже не ссылается на кнопку. Для сохранения контекста используется переменная:

Noty.button('Удалить', 'btn btn-danger', function () {
  const noty = this;
  fetch('/delete')
    .then(() => {
      noty.close();
    });
});

Управление состоянием кнопок

Иногда требуется временно отключить кнопку, чтобы предотвратить повторное нажатие:

Noty.button('Отправить', 'btn btn-primary', function () {
  const button = this.dom;
  button.disabled = true;

  setTimeout(() => {
    this.close();
  }, 2000);
});

this.dom — это DOM-элемент кнопки.

Динамическое создание кнопок

Кнопки могут формироваться динамически:

const actions = ['Да', 'Нет', 'Возможно'];

const buttons = actions.map(action =>
  Noty.button(action, 'btn btn-info', function () {
    console.log(action);
    this.close();
  })
);

new Noty({
  text: 'Выберите вариант',
  buttons: buttons
}).show();

Использование иконок внутри кнопок

Текст кнопки может содержать HTML:

Noty.button('<i class="fa fa-check"></i> OK', 'btn btn-success', function () {
  this.close();
});

Важно: при использовании HTML следует учитывать безопасность (например, XSS).

Позиционирование кнопок

Кнопки автоматически размещаются в нижней части уведомления. При необходимости можно изменить стиль контейнера:

.noty_buttons {
  display: flex;
  justify-content: space-between;
}

Поведение при закрытии

Если уведомление закрывается не через кнопку (например, пользователь нажал вне области), логика кнопок не выполняется. Для обработки таких ситуаций используется параметр callbacks:

new Noty({
  text: 'Сохранить изменения?',
  timeout: false,
  buttons: [
    Noty.button('Да', 'btn btn-success', function () {
      this.close();
    })
  ],
  callbacks: {
    onClose: function () {
      console.log('Уведомление закрыто');
    }
  }
}).show();

Ограничения и особенности

  • Кнопки доступны только при использовании стандартного шаблона уведомления
  • Количество кнопок не ограничено, но избыточность ухудшает UX
  • Не рекомендуется использовать длинные тексты в кнопках
  • Кнопки не поддерживают вложенные элементы управления (например, формы)

Практические сценарии применения

Подтверждение действий:

  • удаление данных
  • выход из системы
  • отмена операций

Быстрые действия:

  • переход на страницу
  • повтор операции
  • выбор варианта

Интерактивные уведомления:

  • согласие с условиями
  • выбор режима работы
  • реакции на событие

Интеграция кнопок делает уведомления Noty полноценным элементом интерфейса, способным заменить модальные окна в простых сценариях и снизить нагрузку на основной UI.

Оглавление