Комплексные интерактивные элементы

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

Создание уведомления осуществляется через конструктор new Noty(options), где options — объект с параметрами уведомления. Основные свойства объекта:

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

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

new Noty({
    text: 'Операция выполнена успешно!',
    type: 'success',
    layout: 'topRight',
    timeout: 3000,
    progressBar: true,
    theme: 'mint'
}).show();

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

Noty позволяет контролировать события уведомления через колбэки. Ключевые события:

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

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

let n = new Noty({
    text: 'Вы кликнули на уведомление!',
    type: 'info',
    layout: 'topRight',
    timeout: 5000,
    callbacks: {
        onClick: function() {
            console.log('Уведомление кликнуто');
        },
        onClose: function() {
            console.log('Уведомление закрыто');
        }
    }
}).show();

Многоступенчатые уведомления и очереди

Noty поддерживает очереди уведомлений, позволяя выводить их поочередно, избегая наложений. Для этого используется класс Noty.queue() и метод queue.add().

Noty.queue = new Noty.Queue();

Noty.queue.add(new Noty({ text: 'Первое уведомление', type: 'info', timeout: 2000 }));
Noty.queue.add(new Noty({ text: 'Второе уведомление', type: 'success', timeout: 2000 }));

Пользовательские кнопки и интерактивные элементы

Для реализации интерактивных уведомлений используется свойство buttons. Оно принимает массив кнопок, каждая из которых определяется объектом:

  • addClass — CSS-класс кнопки.
  • text — текст кнопки.
  • onClick — функция обработки клика, может закрывать уведомление через noty.close().

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

new Noty({
    text: 'Вы уверены, что хотите удалить элемент?',
    type: 'warning',
    layout: 'center',
    modal: true,
    buttons: [
        Noty.button('Да', 'btn btn-success', function(notyInstance) {
            console.log('Элемент удален');
            notyInstance.close();
        }),
        Noty.button('Нет', 'btn btn-error', function(notyInstance) {
            console.log('Удаление отменено');
            notyInstance.close();
        })
    ]
}).show();

Анимации и кастомизация внешнего вида

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

  • open — анимация открытия.
  • close — анимация закрытия.

Пример с кастомной анимацией через CSS-классы:

new Noty({
    text: 'Анимированное уведомление',
    type: 'alert',
    layout: 'topRight',
    theme: 'sunset',
    animation: {
        open: 'animated bounceInRight', // Animate.css классы
        close: 'animated bounceOutRight'
    },
    timeout: 4000
}).show();

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

Интеграция с формами и AJAX-запросами

Библиотека отлично работает с динамическим контентом, включая AJAX-запросы. Например, уведомление о результате запроса:

fetch('/api/save', { method: 'POST', body: JSON.stringify(data) })
    .then(response => response.json())
    .then(result => {
        new Noty({
            text: result.message,
            type: result.success ? 'success' : 'error',
            layout: 'topRight',
            timeout: 3000
        }).show();
    });

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

Модальные уведомления и фокус на контенте

Свойство modal: true блокирует фон и делает уведомление центральным элементом интерфейса. Это особенно полезно для подтверждений действий или ошибок, требующих внимания пользователя. Модальные уведомления можно комбинировать с кнопками для полного контроля действий пользователя.

Настройка позиции и стиля уведомлений

Noty позволяет тонко настроить позицию уведомления через layout и CSS, а также управлять z-index, чтобы уведомления не перекрывали важные элементы интерфейса. Параметр container позволяет выводить уведомление внутри конкретного блока, а не на всей странице:

new Noty({
    text: 'Внутри контейнера',
    type: 'info',
    layout: 'top',
    container: '#custom-container',
    timeout: 3000
}).show();

Поддержка нескольких уведомлений одновременно

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

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

Оглавление