Управление видимыми уведомлениями

Для отображения уведомлений в Noty используется конструктор new Noty(options). Параметр options представляет собой объект с настройками, где ключевыми являются:

  • type — тип уведомления (alert, success, warning, error, information).
  • text — текст уведомления.
  • timeout — время в миллисекундах, через которое уведомление автоматически закроется. Если указано false, уведомление останется до ручного закрытия.
  • layout — расположение на странице (top, topLeft, topCenter, topRight, bottom, bottomLeft, bottomCenter, bottomRight).
  • theme — визуальная тема уведомления (mint, sunset, relax, metroui и др.).

Пример создания уведомления:

new Noty({
    type: 'success',
    text: 'Данные успешно сохранены!',
    timeout: 3000,
    layout: 'topRight',
    theme: 'mint'
}).show();

Метод .show() сразу отображает уведомление. При необходимости можно создать уведомление заранее и показывать его позже.

const notification = new Noty({
    text: 'Новая задача добавлена',
    type: 'information',
    timeout: 5000
});
// отображение по событию
document.querySelector('#btn').addEventListener('click', () => {
    notification.show();
});

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

Автоматическое закрытие контролируется свойством timeout. Значение 0 или false предотвращает автоматическое закрытие.

new Noty({
    text: 'Важное уведомление',
    type: 'warning',
    timeout: false // уведомление не закроется автоматически
}).show();

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

  • .show() — открыть уведомление.
  • .close() — закрыть уведомление вручную.
  • .stop() — остановить таймер автоматического закрытия.
  • .setTimeout(ms) — изменить время до закрытия динамически.
const n = new Noty({ text: 'Таймер будет изменён', timeout: 5000 }).show();
setTimeout(() => {
    n.setTimeout(10000); // увеличиваем время отображения
}, 2000);

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

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

Noty.overrideDefaults({
    maxVisible: 3 // максимум три уведомления одновременно
});

new Noty({ text: 'Уведомление 1', type: 'success' }).show();
new Noty({ text: 'Уведомление 2', type: 'information' }).show();
new Noty({ text: 'Уведомление 3', type: 'warning' }).show();
new Noty({ text: 'Уведомление 4', type: 'error' }).show(); // появится после закрытия предыдущего

Управление позиционированием

layout определяет место появления уведомлений. Для каждого типа уведомлений можно задать индивидуальное расположение.

const n1 = new Noty({ text: 'Вверху слева', layout: 'topLeft' }).show();
const n2 = new Noty({ text: 'Внизу справа', layout: 'bottomRight' }).show();

Комбинирование с CSS позволяет кастомизировать отступы и ширину уведомлений для каждой позиции.

.noty_layout_topRight {
    top: 20px;
    right: 30px;
}
.noty_body {
    width: 300px;
}

Взаимодействие с уведомлениями

Noty поддерживает события для управления поведением:

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

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

new Noty({
    text: 'Нажмите на уведомление',
    type: 'alert',
    timeout: false,
    callbacks: {
        onClick: function() {
            alert('Уведомление кликнуто!');
            this.close();
        },
        onClose: function() {
            console.log('Уведомление закрыто');
        }
    }
}).show();

Динамическое обновление уведомлений

С помощью методов .setText() и .setType() можно менять текст и тип уведомления после его создания.

const n = new Noty({
    text: 'Загрузка...',
    type: 'information',
    timeout: false
}).show();

setTimeout(() => {
    n.setText('Загрузка завершена');
    n.setType('success');
    n.setTimeout(2000); // автоматически закроется через 2 секунды
}, 3000);

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

Метод Noty.closeAll() закрывает все активные уведомления одновременно. Можно передать параметр true, чтобы игнорировать очередь и закрыть все мгновенно.

Noty.closeAll(); // стандартное закрытие с анимацией
Noty.closeAll(true); // мгновенное закрытие всех уведомлений

Совмещение нескольких опций

В сложных интерфейсах часто требуется комбинировать тип, расположение, тему и динамическое обновление. Пример комплексного уведомления:

const n = new Noty({
    text: 'Идет обработка данных...',
    type: 'information',
    layout: 'topCenter',
    theme: 'sunset',
    timeout: false,
    callbacks: {
        onClick: function() {
            this.setText('Обработка прервана');
            this.setType('error');
            this.setTimeout(3000);
        }
    }
}).show();

Это уведомление открывается в центре сверху, остаётся до клика, после которого изменяет текст и тип, и автоматически закрывается через 3 секунды.

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

Оглавление