Использование с jQuery

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

Для начала необходимо подключить зависимости:

<link rel="stylesheet" href="noty.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="noty.min.js"></script>

Порядок подключения важен: сначала jQuery, затем Noty.

Создание уведомлений внутри jQuery-обработчиков

Основной сценарий использования — создание уведомлений в ответ на пользовательские действия, обрабатываемые через jQuery:

$(document).ready(function () {
    $('#btn').on('click', function () {
        new Noty({
            text: 'Кнопка была нажата',
            type: 'success'
        }).show();
    });
});

Ключевые особенности:

  • Используется стандартный синтаксис jQuery для обработки событий
  • Noty создаётся внутри callback-функции
  • Уведомление отображается методом .show()

Работа с AJAX-запросами

Одно из самых распространённых применений — уведомления при выполнении AJAX-запросов.

Успешный запрос

$.ajax({
    url: '/api/data',
    method: 'GET',
    success: function (response) {
        new Noty({
            text: 'Данные успешно загружены',
            type: 'success'
        }).show();
    }
});

Ошибка запроса

$.ajax({
    url: '/api/data',
    method: 'GET',
    error: function () {
        new Noty({
            text: 'Ошибка при загрузке данных',
            type: 'error'
        }).show();
    }
});

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

$.ajax({
    url: '/api/save',
    method: 'POST',
    data: { name: 'Test' },
    beforeSend: function () {
        new Noty({
            text: 'Отправка данных...',
            type: 'info',
            timeout: 1000
        }).show();
    },
    success: function () {
        new Noty({
            text: 'Данные сохранены',
            type: 'success'
        }).show();
    },
    error: function () {
        new Noty({
            text: 'Ошибка сохранения',
            type: 'error'
        }).show();
    }
});

Использование в формах

При работе с формами jQuery часто применяется для валидации и отправки данных. Noty удобно использовать для отображения статуса.

$('form').on('submit', function (e) {
    e.preventDefault();

    let input = $('#name').val();

    if (!input) {
        new Noty({
            text: 'Поле обязательно для заполнения',
            type: 'warning'
        }).show();
        return;
    }

    new Noty({
        text: 'Форма отправлена',
        type: 'success'
    }).show();
});

Делегирование событий и динамический контент

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

$(document).on('click', '.delete-btn', function () {
    new Noty({
        text: 'Элемент удалён',
        type: 'alert'
    }).show();
});

Это особенно важно в приложениях, где DOM обновляется без перезагрузки страницы.

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

Можно задать глобальные параметры Noty при инициализации приложения:

$(document).ready(function () {
    Noty.overrideDefaults({
        layout: 'topRight',
        theme: 'mint',
        timeout: 3000,
        progressBar: true
    });
});

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

Создание обёртки (wrapper) на jQuery

Для упрощения использования часто создаётся вспомогательная функция:

function showNotification(type, text) {
    new Noty({
        type: type,
        text: text
    }).show();
}

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

showNotification('success', 'Операция выполнена');
showNotification('error', 'Произошла ошибка');

Использование цепочек (chaining)

Хотя Noty не является jQuery-плагином в классическом смысле, его можно интегрировать в цепочки логики:

$('#saveBtn').on('click', function () {
    $(this).prop('disabled', true);

    new Noty({
        text: 'Сохранение...',
        type: 'info',
        timeout: 1000
    }).show();

    setTimeout(() => {
        $(this).prop('disabled', false);

        new Noty({
            text: 'Готово',
            type: 'success'
        }).show();
    }, 1000);
});

Работа с анимациями и эффектами jQuery

Noty имеет собственные анимации, но их можно комбинировать с jQuery:

$('#panel').fadeOut(300, function () {
    new Noty({
        text: 'Панель скрыта',
        type: 'information'
    }).show();
});

Очереди уведомлений и массовое управление

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

$('#clearAll').on('click', function () {
    Noty.closeAll();
});

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

$('#multi').on('click', function () {
    for (let i = 0; i < 3; i++) {
        new Noty({
            text: 'Уведомление #' + (i + 1),
            type: 'info'
        }).show();
    }
});

Интеграция с jQuery UI

При использовании jQuery UI Noty может дополнять взаимодействие:

$('#dialog').dialog({
    buttons: {
        "Сохранить": function () {
            new Noty({
                text: 'Изменения сохранены',
                type: 'success'
            }).show();
            $(this).dialog("close");
        }
    }
});

Обработка пользовательских событий

Можно создавать собственные события и вызывать уведомления через jQuery:

$(document).on('user:login', function () {
    new Noty({
        text: 'Пользователь вошёл в систему',
        type: 'success'
    }).show();
});

Триггер события:

$(document).trigger('user:login');

Работа с классами и состояниями элементов

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

$('.item').on('click', function () {
    if ($(this).hasClass('active')) {
        new Noty({
            text: 'Элемент уже активен',
            type: 'warning'
        }).show();
    } else {
        $(this).addClass('active');

        new Noty({
            text: 'Элемент активирован',
            type: 'success'
        }).show();
    }
});

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

jQuery Deferred можно использовать вместе с Noty:

function asyncOperation() {
    let deferred = $.Deferred();

    setTimeout(() => {
        deferred.resolve();
    }, 1000);

    return deferred.promise();
}

asyncOperation().done(function () {
    new Noty({
        text: 'Асинхронная операция завершена',
        type: 'success'
    }).show();
});

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

Связка Noty + jQuery особенно актуальна для:

  • проектов на jQuery без современных фреймворков
  • административных панелей
  • legacy-приложений
  • CMS с jQuery-плагинами

Преимущества:

  • простая интеграция
  • минимум изменений в существующем коде
  • быстрый вывод уведомлений в привычной архитектуре

Ограничения:

  • отсутствие реактивности
  • необходимость ручного управления состоянием
  • более сложная масштабируемость по сравнению с современными подходами

Практический паттерн: централизованное уведомление

В крупных проектах используется единая точка вызова уведомлений:

const Notifier = {
    success: (text) => new Noty({ type: 'success', text }).show(),
    error: (text) => new Noty({ type: 'error', text }).show(),
    warning: (text) => new Noty({ type: 'warning', text }).show(),
    info: (text) => new Noty({ type: 'info', text }).show()
};

Применение:

Notifier.success('Данные обновлены');
Notifier.error('Ошибка сервера');

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

Оглавление