Скрипты уведомления пользователя

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

Окна уведомления

Первый пример уведомления посредством jQuery используя плагин noty . Второй способ уведомления использует библиотеку sweetAlert , которая работает аналогично окну браузера Alert . Библиотека sweetAlert2 работает на любом типе устройств, так что Вы легко можете использовать их для своего веб-сайта.

Применить уведомления

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

Приступая к работе с noty

Первый шаг состоит в том, чтобы скачать сам плагин noty и подключить его к странице после библиотеки jQuery.



<script src='
http://pixelcom.crimea.ua//code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='
http://pixelcom.crimea.ua/jquery.noty.packaged.min.js'></script>


Простой пример, который использует этот плагин.



noty({ text: 'Готово!'});


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

Используя этот плагин можно добавить немного больше опции. Уведомление, согласно опциям появляется по центру окна браузера, закрывается после наведения на него курсора.



$.noty.defaults.killer = true;

noty({
   text: 'Готово!',
   layout: 'center',
   closeWith: ['click', 'hover'],
   type: 'success'
})


Приступая к работе с sweetAlert

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



<link rel='stylesheet' href='
http://pixelcom.crimea.ua/css/sweetalert2.css' type='text/css' media='all' />
<script src='
http://pixelcom.crimea.ua/js/sweetalert2.min.js'></script>




swal('Готово!', 'Ваше сообщение было успешно отправлено', 'success');




swal({
   title: 'Подтвердить',
   text: 'Вы уверены, что хотите удалить это сообщение?',
   type: 'warning',
   showCancelButton: true,
   confirmButtonColor: '#DD6B55',
   confirmButtonText: 'Удалить!',
   cancelButtonText: 'Не удалять!',
   closeOnConfirm: false,
   closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal('Готово!', 'Сообщение удалено!', 'success')
  } else {
	    swal('Закрыть', 'Сообщение не удалено', 'error');
  }
});


Посмотреть все варианты уведомления sweetAlert2 можно на официальной странице sweetalert2 .

Заключение

В этой статье продемонстрированы два способа уведомления пользователя. Первый пример с использованием плагина jQuery, второй пример sweetAlert2 , библиотека JavaScript предназначена в качестве замены функции alert() .

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>