Объявление уведомлений

Библиотека Noty предоставляет простой и гибкий API для создания уведомлений. Основной способ создания уведомления — использование конструктора Noty с передачей конфигурационного объекта.

Минимальный пример:

new Noty({
  text: 'Простое уведомление'
}).show();

Ключевые моменты:

  • text — содержимое уведомления (поддерживает HTML)
  • метод .show() — обязательный для отображения

Основные параметры конфигурации

Тип уведомления (type)

Определяет визуальный стиль:

new Noty({
  text: 'Успешно выполнено',
  type: 'success'
}).show();

Доступные значения:

  • alert — стандартное
  • success — успешное действие
  • error — ошибка
  • warning — предупреждение
  • info — информационное

Расположение (layout)

Управляет позицией на экране:

new Noty({
  text: 'Сообщение вверху справа',
  layout: 'topRight'
}).show();

Варианты:

  • top, topLeft, topRight
  • bottom, bottomLeft, bottomRight
  • center, centerLeft, centerRight

Время отображения (timeout)

Задает длительность жизни уведомления в миллисекундах:

new Noty({
  text: 'Закроется через 3 секунды',
  timeout: 3000
}).show();

Особенности:

  • false — уведомление не закроется автоматически
  • 0 — аналогично false

Индикатор прогресса (progressBar)

Отображает шкалу времени до закрытия:

new Noty({
  text: 'С индикатором',
  timeout: 5000,
  progressBar: true
}).show();

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

Добавление интерактивных элементов:

new Noty({
  text: 'Удалить файл?',
  buttons: [
    Noty.button('Да', 'btn btn-success', function () {
      console.log('Удалено');
      this.close();
    }),
    Noty.button('Отмена', 'btn btn-error', function () {
      this.close();
    })
  ]
}).show();

Особенности:

  • Noty.button(text, className, callback)
  • this.close() — закрытие текущего уведомления

Анимации

Настройка появления и исчезновения:

new Noty({
  text: 'С анимацией',
  animation: {
    open: 'animated fadeIn',
    close: 'animated fadeOut'
  }
}).show();

Используются CSS-классы (например, из Animate.css).

Темы оформления (theme)

Позволяют изменить внешний вид:

new Noty({
  text: 'Тёмная тема',
  theme: 'mint'
}).show();

Популярные темы:

  • mint
  • sunset
  • relax
  • metroui

Очередь уведомлений (queue)

Позволяет управлять группами уведомлений:

new Noty({
  text: 'Очередь уведомлений',
  queue: 'customQueue'
}).show();

Настройка максимального количества:

Noty.setMaxVisible(3, 'customQueue');

Закрытие уведомлений

Программное закрытие

const notification = new Noty({
  text: 'Закроется вручную',
  timeout: false
}).show();

notification.close();

Закрытие по клику

new Noty({
  text: 'Кликни для закрытия',
  closeWith: ['click']
}).show();

Варианты:

  • click
  • button
  • hover

Обработчики событий

Позволяют реагировать на жизненный цикл уведомления:

new Noty({
  text: 'События',
  callbacks: {
    onShow: function() {
      console.log('Показано');
    },
    onClose: function() {
      console.log('Закрыто');
    }
  }
}).show();

Основные события:

  • onShow
  • onShown
  • onClose
  • onClosed

HTML внутри уведомлений

Поддержка разметки:

new Noty({
  text: '<b>Жирный текст</b><br><i>Курсив</i>'
}).show();

Важно учитывать безопасность при вставке пользовательского контента.

Стек уведомлений

Создание нескольких уведомлений:

for (let i = 1; i <= 5; i++) {
  new Noty({
    text: `Уведомление ${i}`,
    timeout: 2000
  }).show();
}

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

Глобальные настройки

Установка параметров по умолчанию:

Noty.overrideDefaults({
  layout: 'topRight',
  theme: 'mint',
  timeout: 3000
});

После этого новые уведомления автоматически используют заданные значения.

Асинхронные сценарии

Использование с AJAX или fetch:

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    new Noty({
      type: 'success',
      text: 'Данные загружены'
    }).show();
  })
  .catch(() => {
    new Noty({
      type: 'error',
      text: 'Ошибка загрузки'
    }).show();
  });

Переиспользование конфигураций

Создание шаблонов:

function showSuccess(message) {
  return new Noty({
    type: 'success',
    layout: 'topRight',
    timeout: 2000,
    text: message
  }).show();
}

showSuccess('Операция выполнена');

Взаимодействие с DOM

Привязка к событиям:

document.querySelector('#btn').addEventListener('click', () => {
  new Noty({
    text: 'Кнопка нажата'
  }).show();
});

Массовое закрытие

Закрытие всех уведомлений:

Noty.closeAll();

Или конкретной очереди:

Noty.closeAll('customQueue');

Настройка поведения при наведении

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

new Noty({
  text: 'Остановится при наведении',
  timeout: 5000,
  pauseOnHover: true
}).show();

Расширенные параметры

Дополнительные возможности:

new Noty({
  text: 'Расширенные настройки',
  force: true,
  killer: false,
  closeWith: ['click', 'button'],
  visibilityControl: true
}).show();

Описание:

  • force — игнорирует лимит очереди
  • killer — закрывает другие уведомления
  • visibilityControl — учитывает вкладку браузера

Использование кастомных контейнеров

Встраивание в определённый элемент:

new Noty({
  text: 'Внутри контейнера',
  container: '#notifications'
}).show();

Инкапсуляция логики уведомлений

Организация централизованного управления:

const notifier = {
  success(msg) {
    return new Noty({ type: 'success', text: msg }).show();
  },
  error(msg) {
    return new Noty({ type: 'error', text: msg }).show();
  }
};

notifier.success('Готово');

Такой подход упрощает масштабирование и поддержку кода.

Оглавление