SweetAlert2 - красивая, гибкая, настраиваемая и доступная замена всплывающих окон JavaScript.
SweetAlert2
является преемником SweetAlert. Лимон Монте создал SweetAlert2
в январе 2015 года, потому что SweetAlert
репозиторий в то время не поддерживался. Похоже, SweetAlert
снова в игре.
Но я решил использовать SweetAlert2
предоставленных больше примеров, чем SweetAlert. Также, по словам создателя SweetAlert2
, оригинальный плагин swal стал более сложным по структуре, чем должен быть. Простота кода позволяет другим пользователям swal2 легко вносить свой вклад . (GitHub)
[ЧАСТЬ 1. Как настроить сообщения SweetAlert2]
1–1. Примеры всплывающих сообщений
Вот примеры всплывающих сообщений, доступных на SweetAlert2
веб-странице, о которой я говорил.
1–2. Настраиваемые всплывающие сообщения
Я создал 3 вида всплывающих сообщений: «Спасибо», «Отмена» и «Ввод текста».
1–3. Справочная информация
Я сделал пять блоков, которые можно переключать при нажатии кнопки посередине. Кроме того, поскольку только div «etc» просит пользователей вводить данные, я назначил для этого div другой класс.
Я не уверен, есть ли способ разместить div в геометрической форме. Я расположил блоки так, чтобы они выглядели как круг, используя функцию translate()
.
1–4. Сообщение «Спасибо»
Поскольку в сообщении «спасибо» нет кнопки «отменить», я сделал цвет фона для каждого div, который нужно изменить, прежде чем появится сообщение «спасибо».
1–5. Сообщение «Отменить»
Сообщение «Отмена» имеет две кнопки: «да!» и «отменить». Я не хотел, чтобы цвет фона div менялся при нажатии кнопки «Отмена». Таким образом, цвет фона меняется только после того, как пользователь нажмет «да!» в сообщении с подтверждением «отменить».
1–6. Сообщение «Ввод текста»
Async/await
- это способ написания асинхронного кода. Ключевое слово await
заставляет JavaScript ждать, пока это обещание не исполнится, а затем продолжить работу со своим результатом.
[ЧАСТЬ 2. Как создавать многоязычные сообщения SweetAlert2]
Вдохновленный ответом Адама Азада в этом StackOverflow
сообщении, я начал работать над созданием многоязычного веб-приложения, сохраняющего выбранный пользователем язык. Я могу успешно переключаться между английским и корейским языками для всего содержимого в моем веб-приложении, за исключением содержимого SweetAlert2
сообщений.
- После настройки я добавил
class="lang"
иkey="(a key name that matches a content goes here)"
для каждого содержимого.
Поскольку мне удалось настроить confirmButtonText
, изменив с Got it!
на '<div id="swal2-confirmBtnTxt" style="color:#000000">Got it!</div>'
, я подумал, что могу просто добавить class="lang"
и имя ключа для создания многоязычных всплывающих сообщений в SweetAlert2
.
- Поменял с
'Thank you!'
на'<h2 class="lang" key="thxMsgTitle"></h2>'
: ничего не появилось. - Изменена форма
'Your input has been recorded.'
на'<div class="lang" key="thxMsgContent"></div>'
: вместо текста во всплывающем сообщении отображался код. - Изменен с
<div id="swal2-confirmBtnTxt" style="color:#000000">Got it!</div>
на'<div class="lang" key="thxMsgConfirmBtnTxt" id="swal2-confirmBtnTxt" style="color:#000000"></div>'
: ничего не появилось.
Почему это не сработало: (объяснение Милни) Когда выполняется следующий код, SweetAlert2
элементов еще не загружаются на веб-страницу.
$(".lang").each(function(index, element) { $(this).text(arrLang[lang][$(this).attr("key")]); });
Чтобы решить эту проблему, я должен либо вызвать это снова сразу после вызова SweetAlert2
, либо добавить какой-то прослушиватель событий, который делает это, когда элементы добавляются динамически.
Milney также предоставил альтернативное решение и решил использовать этот метод.
ШАГ 1: извлечение правильного значения из массива при создании SweetAlert2
сообщений. (например, confirmButtonText: arrLang[lang]['thxMsgConfirmBtnTxt']
)
ШАГ 2. Поскольку при нажатии кнопки "Английский" или "Корейский" автоматически не обновлялось содержимое в SweetAlert2
сообщениях, я принудительно обновлял веб-страницу, когда "Английский" или кнопка «Корейский» была нажата путем добавления value="Refresh Page" onClick="window.location.reload()"
.
localStorage
позволяет мне сохранять язык, выбранный пользователями.
[ЧАСТЬ 3. Области улучшения]
- Свяжите ввод пользователей с базой данных
- Переключение между языками без принудительного обновления веб-страницы при нажатии кнопки
JSfiddle для демонстрации того, что я объяснил в этом сообщении в блоге: https://jsfiddle.net/hlim188/15no3zyd/80/
Вы также можете проверить мой репозиторий на GitHub.
Спасибо за чтение! 💕 Если вам понравился этот пост в блоге, пожалуйста, хлопайте в ладоши👏