Красивые алерты для вашего приложения - SweetAlerts

January 8, 2015

Когда делаешь вебсайты и используешь в них JavaScript нам часто приходится делать обратную связь с пользователями и давать понять им, что действие, которое они запросили было выполнено или нет. Раньше разработчики использовали window.alert(). Очень удобно, что эту функцию поддерживают все браузеры, но они не предоставляют никакого функционала для их стилизации. Сегодня разработчики предпочитают сами создавать модальные окна. В этой статье хотелось бы рассказать вам о библиотеке sweetAlert, которая заменяет собой обычный alert()

Что представляет собой sweetAlert?


Как я уже говорил, библиотека sweetAlert это замена стандартной функции window.alert(). Библиотека не несет за собой никакие зависимости. Состоит только из двух файлов: js и css.

Эта библиотека имеет три особенности. Первое - вы можете использовать ее в любом проекте. Второе это отдельная ветка специально адаптированная для Twitter Bootstrap. И третье, отдельная ветка которую вы можете использовать в ваших Android проектах.

Теперь давайте посмотрим, как использовать библиотеку на вашем сайте.

Начинаем работу с sweetAlert


Для использования sweetAlert в вашем проекте необходимо скачать файлы и подключить на тех страницах, на которых потребуется использование. Вы можете скачать исходники из GitHub репозитория, либо воспользоваться Bower для установки. Для этого выполните команду:

bower install sweetalert

Далее, необходимо подключить библиотеку к телу страницы (советую весь javascript подключать всегда в конце страницы):


Также подключаем файл стилей:



Когда библиотека будет подключена вы можете начинать использовать ее в своем проекте:

sweetAlert('Поздравляем!', 'Ваше сообщение было успешно отправлено!', 'success');

Результат будет следующий:

[jsfiddle url="http://jsfiddle.net/9k6o13qw/10/"]

Не знаю как вам, но я люблю небольшие анимации!

Как вы могли наблюдать в предыдущем примере, библиотека работает через функцию sweetAlert. Она принимает три параметра:

  • title (обязательно) - Строка основного заголовка алерта
  • message (опционально) - необязательная строка более подробного сообщения ниже заголовка
  • type (опционально) - необязательная строка, указывающая на тип алерта. Значение может быть successm errorm warning и info


Библиотека также предлагает короткое имя для вызова:

swal('Congratulations!', 'Your message has been succesfully sent', 'success');

В дополнении ко всему, функция может принимать параметры в качестве объекта. Предыдущий пример может быть перезаписан как

swal({
   title: 'Congratulations!',
   text: 'Your message has been succesfully sent',
   type: 'success'
});

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

Параметры sweetAlert








confirmButtonText Текст кнопки "ОК"
cancelButtonText Текст кнопки "Отмена"
showCancelButton Показывать или нет кнопку отмена. По умолчанию false. Чтобы показывать, необходимо установить в true
confirmButtonColor  Задается цвет кнопки "ОК". Можно задавать как #000000, как Black или как  rgb(0,0,0)
 timer Указывается через сколько милисекунд автоматически закрыть алерт.

Комментарии

comments powered by Disqus