如何使用本地化.js翻译跨js文件.如SweetAlert2.js

How to use localize.js translation cross js files. e.g SweetAlert2.js

本文关键字：js 文件 SweetAlert2 翻译 本地化 何使用      更新时间：2023-09-26

我想在另一个js文件中使用jquery.local .js (i18n json文件)。比如sweetalerts2.

本地化提供json文件的翻译，根据您选择的语言(EN,FR,GR) (https://github.com/coderifous/jquery-localize)

甜蜜警报2是性感的弹出警报，不能被阻止从浏览器，像普通警报，并给你一套完整的选择，以使他们看起来用户友好。(https://limonte.github.io/sweetalert2/)

但问题是如何使甜蜜警报弹出翻译根据用户选择的语言

localalize为我们提供了回调，但您还必须找到用户选择的语言，以便使用您必须使用的语言的json文件。为此，到jquery。local。js文件中在文件的顶部设置一个全局变量

var globallanguage;

之后转到185行，下面的代码存在，并在" globalllanguage "处输入"lang"变量。

lang = normaliseLang(options.language ? options.language : $.defaultLanguage);
globallanguage=lang;

现在你有用户的选择保存在" globalllanguage "。然后，您可以转到任何您想要的文件，并使用下面的代码来检索翻译。

var message;
var messagetitle;
$("[data-localize]").localize("i18n/site", 
      { language: globallanguage, //taking from localize.jquery
        callback: function(data, defaultCallback) 
        {message = data.alert.incidentalert.LEAVE;
        defaultCallback(data);
      }});
$("[data-localize]").localize("i18n/site", 
      { language: globallanguage, //taking from localize.jquery
        callback: function(data, defaultCallback) 
        {messagetitle = data.alert.incidentalert.LEAVEHEADER;
        defaultCallback(data);
      }});

现在您从用户选择的JSON文件中检索了您想要的消息。
之后，您可以简单地调用SweetAlert2 SWAL并显示消息。

swal({
          title : messagetitle,
          text : message,
          type : "warning",
          showCancelButton : true,
          confirmButtonColor : "#e54747",
          confirmButtonText : button,
          closeOnConfirm : false
        }).then(function () { //function when Leave is pressed

这不是什么超级令人兴奋的事情，但它是非常有用的，知道你可以使用SweetAlerts或任何其他JS库，在任何语言你想…

用jquery-localize定位SweetAlert2模态非常简单:

swal({
  ...
  onOpen: function(modal) {
    $(modal).find("[data-localize]").localize("modal", {language: "fr"})
  }
});

将"fr"替换为用户语言，应该是这样的

进一步扩展Limon Monte所说的，这是完整的实现。

 swal({
  onBeforeOpen: (modal) => {
    $(modal).find("[data-localize]").localize("swal", {skipLanguage: /^en/, pathPrefix: "assets/js/i18n"})
  },
  title: '<span data-localize="dropshift.title">Drop Shift</span>',
  html: '<span data-localize="dropshift.text">Are you sure you want to drop this shift?</span>',
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: '<span data-localize="dropshift.confirm">Yes, drop it!</span>',
  cancelButtonText: '<span data-localize="dropshift.cancel">Cancel</span>'
}).then((result) => {
  if (result.value) {
    $.ajax({
        url: 'path/to/file/',
        type: 'POST',
        dataType: 'json',
        data: {method: 'setDropShift',shiftid: shiftId},
    })
    .done(function() {
        console.log("success")
    })
    .fail(function(e) {
        console.log("error")
    })
    .always(function() {
        console.log("complete")
    })
  }
}).catch(swal.noop)

然后在我的swal-fr.json 

{
  "dropshift": {
  "title": "Abandonner Poste",
  "text": "Êtes-vous sûr de vouloir abandonner ce poste?",
  "confirm": "Oui, Abandonner!",
  "cancel": "Annuler"
  }
}
相关文章：