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. Области улучшения]

  1. Свяжите ввод пользователей с базой данных
  2. Переключение между языками без принудительного обновления веб-страницы при нажатии кнопки

JSfiddle для демонстрации того, что я объяснил в этом сообщении в блоге: https://jsfiddle.net/hlim188/15no3zyd/80/

Вы также можете проверить мой репозиторий на GitHub.

Спасибо за чтение! 💕 Если вам понравился этот пост в блоге, пожалуйста, хлопайте в ладоши👏