Создание приятных уведомлений с помощью jQuery

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

В этой статье я объясню, как вы можете интегрировать хорошие уведомления в свои веб-страницы с помощью плагина jQuery, называемого noty .

Что ноты?

noty — это плагин jQuery, который позволяет легко создавать несколько типов отзывов, таких как оповещения, сообщения об успехах или сбоях и запросы подтверждения. Мой выбор для обсуждения этого плагина не случаен. На самом деле, noy — один из самых популярных и популярных плагинов, которые вы можете найти в реестре плагинов jQuery . Одной из лучших особенностей noty является то, что он очень настраиваемый благодаря множеству доступных ему опций, некоторые из которых будут обсуждаться в этой статье. Еще одна интересная особенность заключается в том, что она позволяет ставить уведомления в очередь, чтобы вам не приходилось ждать окончания жизненного цикла ранее показанных уведомлений. Однако, если вам не нужна эта функция, вы можете отключить ее.

Начало работы с Ноти

Как и многие плагины jQuery, очень легко начать использовать ноты. Первым шагом является загрузка плагина и включение его в ваши страницы после библиотеки jQuery. Чтобы загрузить ноти, вы можете либо посетить его репозиторий GitHub и загрузить последнюю доступную версию, либо ввести следующую команду Bower:

bower install noty

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

 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="path/to/noty/jquery.noty.packaged.min.js"></script>

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

 <script>
   noty({ text: 'My first notification using noty'});
</script>

Вышеуказанное заявление приведет к созданию нового уведомления. Результат показан в демонстрационном примере ниже, также доступном как JSfiddle :

Параметры

noty предоставляет множество опций для настройки одного уведомления, включая свойство по default Используя объект по default Плагин также предлагает различные хуки для выполнения обратных вызовов после выполнения заданного действия. Например, вы можете запустить определенную функцию после показа или закрытия уведомления. В этом разделе я не собираюсь обсуждать все варианты, но я упомяну, что я считаю наиболее важными.

Первый вариант, который я хочу упомянуть, это type Его значение по умолчанию — "alert""success""error""warning""information""confirm"

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

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

Другой вариант, который стоит упомянуть — это layout

Последний вариант, который я хочу выделить, это closeWith Он определяет, как уведомление может быть закрыто, и принимает массив значений. По умолчанию уведомление закрывается щелчком мыши, но вы можете использовать другие значения, такие как "button""hover"

В дополнение к описанным свойствам плагин имеет множество других опций для настройки анимации, скорости, кнопок и многого другого.

Собираем все вместе

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

• имеет текст «Happy!»
• должен отображаться в центре страницы
• может быть закрыт нажатием на уведомление, но и наведением на него
• должно быть успешное уведомление

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

 $.noty.defaults.killer = true;

noty({
   text: 'Happy!',
   layout: 'center',
   closeWith: ['click', 'hover'],
   type: 'success'
});

Демонстрационная версия этого кода показана ниже, но также доступна в виде JSfiddle .

Вывод

В этой статье мы обсудили ноти, настраиваемый плагин jQuery, который позволяет нам легко создавать уведомления. Надеюсь, вам понравилось, и вы нашли это полезным.

Вы когда-нибудь слышали об этом плагине? Если да, то вы когда-нибудь использовали его в одном из своих проектов? Поделитесь с нами своим опытом!