При создании веб-сайтов на основе JavaScript нам часто приходится предоставлять обратную связь нашим пользователям, чтобы они знали, было ли выполненное ими действие успешным или нет. На window.alert() Интернета разработчики создавали сообщения с помощью функции window.alert() . Несмотря на то, что alert() работает на практике и работает одинаково во всех браузерах, он не очень гибкий и, честно говоря, его внешний вид ужасен. Сегодня существует несколько подходов, которые варьируются от модальных до встроенных сообщений. В этой статье я познакомлю вас с sweetAlert , библиотекой, которая заменяет JavaScript-функцию alert() .
Что такое sweetAlert?
Как уже упоминалось во введении, sweetAlert является заменой функции JavaScript window.alert() которая показывает очень красивые модальные окна. Это отдельная библиотека, которая не имеет зависимостей и сделана из файла JavaScript плюс файл CSS.
Эта библиотека поставляется в трех разных вариантах. Первая — это библиотека, которую вы можете использовать в любом веб-проекте, вторая — это форк, который специально адаптирован для работы с Bootstrap, а третья — это вилка, которую вы можете использовать в своих проектах Android. Этот проект постоянно находится в стадии разработки, что видно из того, что последняя версия была выпущена всего несколько дней назад.
Теперь, когда вы знаете, о чем эта библиотека, давайте посмотрим, как вы можете использовать ее на своем веб-сайте.
Начало работы с sweetAlert
Чтобы использовать sweetAlert в своих проектах, вы должны загрузить его и включить на страницы, где вы собираетесь использовать эту библиотеку. Существует несколько вариантов загрузки библиотеки: первая — это посещение ее репозитория GitHub , а вторая — через Bower. Если вы решите использовать Bower, вы должны выполнить команду:
bower install sweetalert
После загрузки вы можете включить файл JavaScript с обычным элементом script как это делается для любой другой библиотеки JavaScript:
<script src="path/to/sweet-alert.min.js"></script>
Кроме того, вы должны включить файл CSS, как показано ниже:
<link rel="stylesheet" href="path/to/sweet-alert.css" />
После этого вы готовы использовать sweetAlert на своем веб-сайте. Минимальный пример использования показан ниже:
sweetAlert('Congratulations!', 'Your message has been successfully sent', 'success');
В результате получается следующий вывод:
Я не знаю, о чем ты думаешь, но я люблю маленькую анимацию!
Как вы видели из предыдущего оператора, библиотека работает через метод sweetAlert . Он принимает до трех параметров:
-
title(обязательный): строка, представляющая заголовок отображаемого предупреждения -
message(необязательно): необязательная строка, представляющая сообщение, отображаемое под заголовком -
type(необязательно): необязательная строка, представляющая тип сообщения, которое вы хотите показать. Его значение может быть одним из следующих:"success","error","warning"и"info".
Библиотека также предлагает хороший ярлык для вызова метода swal под названием swal . Итак, предыдущее утверждение можно переписать следующим образом:
swal('Congratulations!', 'Your message has been succesfully sent', 'success');
В дополнение к представленным параметрам библиотека предлагает целый набор параметров, которые можно установить через объект, переданный в качестве первого параметра метода. Например, предыдущий оператор может быть переписан так:
swal({ title: 'Congratulations!', text: 'Your message has been succesfully sent', type: 'success' });
Теперь, когда вы знаете основы этой библиотеки, давайте узнаем немного больше о ее возможностях.
Параметры
Первый вариант, который я хочу описать, позволяет изменить текст показанных кнопок. Например, если вы хотите изменить текст кнопки для сообщения об успехе с «ОК» на «Да!», Вы можете установить значение для опции с именем confirmButtonText . Если вы хотите изменить текст кнопки для кнопки отмены, вы должны установить значение cancelButtonText . В этот момент самый наблюдательный из вас должен поднять руку и сказать: «Я еще не видел ни одной кнопки отмены, о чем вы говорите?» Если вы это сделали, отлично!
Правда в том, что sweetAlert позволяет вам показать сообщение об отмене, но вы должны явно указать, что вы хотите его. Вы можете сделать это, установив для параметра showCancelButton значение true .
Следующий код использует эти три опции:
swal({ title: 'Confirm', text: 'Are you sure to delete this message?', type: 'warning', showCancelButton: true, confirmButtonText: 'Yes, sir', cancelButtonText: 'Not at all' });
Этот код приводит к следующему:
Если вам не нравятся цвета кнопки подтверждения, вы также можете изменить ее, установив значение хеш-функции для опции confirmButtonColor .
Другой интересный вариант заключается в том, что вы можете установить, что сообщение будет отображаться в течение определенного периода времени, а затем автоматически закрывается. Вы можете решить эту задачу, передав число, представляющее количество миллисекунд, после которого сообщение закрывается, в опцию, называемую timer .
Следующий код использует эти два других параметра:
swal({ title: 'Confirm', text: 'Are you sure to delete this message?', type: 'warning', showCancelButton: true, confirmButtonColor: '#987463', timer: 1500 });
Это приводит к следующему:
Вывод
В этой статье я рассмотрел sweetAlert, библиотеку, предназначенную для замены функции JavaScript window.alert() , которая позволяет вам показывать очень приятные сообщения вашим пользователям. Эта библиотека работает на любом типе устройств, поэтому вы можете использовать ее и на своем адаптивном веб-сайте. Я надеюсь, что вы любите библиотеку так же, как и я, и вы дадите ей шанс в некоторых своих проектах.