Синтаксис создания уведомления

Для создания уведомления используется конструктор Noty. Основная структура вызова выглядит следующим образом:

new Noty({
    text: 'Сообщение уведомления',
    type: 'alert',
    layout: 'topRight',
    timeout: 3000,
}).show();
  • text — текст уведомления. Может содержать HTML-разметку.
  • type — тип уведомления: alert, success, warning, error, information. Тип влияет на цветовую схему и иконку.
  • layout — позиция на экране. Доступные значения: top, topLeft, topCenter, topRight, center, centerLeft, centerRight, bottom, bottomLeft, bottomCenter, bottomRight.
  • timeout — время в миллисекундах до автоматического скрытия уведомления. Значение false отключает автоматическое закрытие.

Метод show() инициирует отображение уведомления. Без его вызова уведомление не появится, даже если объект создан.

Настройка внешнего вида уведомлений

Noty позволяет детально управлять визуальной частью уведомлений:

  • theme — тема оформления. Стандартные: relax, mint, metroui, sunset. Можно подключить кастомные темы через CSS.
  • progressBar — отображение индикатора времени до закрытия. Значение true включает прогресс-бар.
  • closeWith — массив, задающий способы закрытия уведомления: ['click', 'button', 'hover']. Например:
new Noty({
    text: 'Нажмите кнопку для закрытия',
    closeWith: ['button'],
}).show();
  • animation — объект, определяющий анимацию появления и скрытия уведомления. Пример:
animation: {
    open: 'animated bounceInRight',
    close: 'animated bounceOutRight',
}

Обработка событий уведомлений

Noty предоставляет встроенные события, позволяющие отслеживать жизненный цикл уведомления:

  • onShow — вызывается при появлении уведомления.
  • onClose — срабатывает при закрытии.
  • onClick — обработка клика по уведомлению.
  • onHover — вызывается при наведении курсора.

Пример использования:

new Noty({
    text: 'Уведомление с событиями',
    type: 'success',
    callbacks: {
        onShow: function() {
            console.log('Уведомление показано');
        },
        onClose: function() {
            console.log('Уведомление закрыто');
        }
    }
}).show();

Создание уведомлений с динамическим содержимым

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

let myNoty = new Noty({
    text: 'Начальное сообщение',
    type: 'information',
    timeout: false
}).show();

setTimeout(() => {
    myNoty.setText('Сообщение обновлено через 3 секунды');
    myNoty.setType('success');
}, 3000);

Методы setText и setType позволяют менять текст и тип уведомления в реальном времени, не создавая новое.

Массовое создание и управление уведомлениями

Для управления несколькими уведомлениями удобно хранить ссылки на объекты Noty:

let notifications = [];

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

// Закрыть все уведомления через 5 секунд
setTimeout(() => {
    notifications.forEach(n => n.close());
}, 5000);

Интеграция HTML и интерактивных элементов

Внутри текста уведомления допустимо использовать HTML-контент и кнопки:

new Noty({
    text: '<strong>Важное сообщение!</strong> <button id="confirmBtn">Подтвердить</button>',
    type: 'warning',
    timeout: false,
    callbacks: {
        onShow: function() {
            document.getElementById('confirmBtn').addEventListener('click', () => {
                this.close();
            });
        }
    }
}).show();

Такой подход позволяет создавать полностью интерактивные уведомления без дополнительных модальных окон.

Ключевые методы объектов Noty

  • show() — отображает уведомление.
  • close() — закрывает уведомление.
  • setText(newText) — изменяет текст.
  • setType(newType) — меняет тип.
  • stop() — останавливает автоматическое закрытие.
  • resume() — возобновляет автоматическое закрытие после stop().

Использование этих методов позволяет строить гибкую систему уведомлений с динамическим поведением и контролем жизненного цикла.

Оглавление