Изменение свойств после создания

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

Методы для изменения параметров

Каждый экземпляр уведомления в Noty содержит методы для управления визуальными и функциональными свойствами:

  • setText(text) Позволяет изменить текст уведомления. Например:

    let notification = new Noty({
    text: 'Начальный текст',
    type: 'info',
    timeout: false
}).show();

// Через 2 секунды текст изменится
setTimeout(() => {
    notification.setText('Обновленный текст');
}, 2000);

    Этот метод заменяет содержимое уведомления, сохраняя его текущее состояние и стиль.

  • setType(type) Изменяет тип уведомления (alert, success, error, warning, info), что автоматически обновляет соответствующий стиль иконки и фон:

    notification.setType('success');

  • setTimeout(timeout) Позволяет динамически изменить задержку автоматического закрытия уведомления. При установке значения false уведомление перестает закрываться автоматически:

    notification.setTimeout(5000); // уведомление закроется через 5 секунд

  • setProgressBar(progressBar) Управляет видимостью полосы прогресса уведомления. Это полезно при динамическом изменении состояния уведомления:

    notification.setProgressBar(false); // скрыть прогресс

Работа с событиями

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

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

Пример динамического изменения типа уведомления с использованием события onClick:

let notification = new Noty({
    text: 'Нажмите, чтобы изменить тип',
    type: 'info',
    timeout: false
}).show();

notification.on('onClick', () => {
    notification.setType('warning');
    notification.setText('Тип изменен на предупреждение');
});

Анимации при изменении свойств

Изменение свойств уведомления может сопровождаться анимацией. Для этого используется параметр animation при создании уведомления. Например:

let notification = new Noty({
    text: 'Анимированное уведомление',
    type: 'info',
    animation: {
        open: 'animated fadeInRight',
        close: 'animated fadeOutRight'
    },
    timeout: false
}).show();

// Изменение типа с анимацией
setTimeout(() => {
    notification.setType('success');
}, 2000);

Noty автоматически применяет CSS-анимации при изменении типа и текста, что позволяет создавать плавные визуальные эффекты без дополнительных библиотек.

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

Хотя позиция уведомления обычно задается при создании, возможна динамическая корректировка через манипуляцию DOM-элементом уведомления:

notification.barDom.style.top = '50px';
notification.barDom.style.right = '20px';

Это позволяет перемещать уведомление в нужное место без пересоздания экземпляра.

Изменение кнопок и действий

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

notification.setText('Обновленное уведомление с кнопкой');
notification.barDom.querySelector('.noty_buttons').innerHTML = '';
let newButton = document.createElement('button');
newButton.textContent = 'Закрыть';
newButton.oncl ick = () => notification.close();
notification.barDom.querySelector('.noty_buttons').appendChild(newButton);

Практические сценарии

  1. Обновление прогресса загрузки — уведомление с полосой прогресса можно динамически обновлять по мере загрузки данных.
  2. Изменение статуса операций — уведомление может менять тип с info на success или error после завершения операции.
  3. Интерактивные уведомления — пользовательские действия (клик, наведение) могут менять содержание, тип или видимость уведомления.

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

Оглавление