Question

我想在另一个js文件中使用jquery.localize.js（i18n json文件）。让我们说sweetalerts2。

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

Sweet Alert2是一种性感的弹出警报，无法通过浏览器阻止，如常见警报，并为您提供全套选项，以使其看起来更友好。（https://limonte.github.io/sweetalert2/）

但问题是 如何根据用户选择的语言制作Sweet Alert弹出窗口 。

Answer 1

Localize为我们提供了回调，但您还必须找到用户已选择的语言才能使用您必须使用的语言的json文件。为了做到这一点，请转到jquery.localize.js文件，并在文件顶部创建一个全局变量

<assembly xmlns="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.3"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.3 http://maven.apache.org/xsd/assembly-1.1.3.xsd">
<id>distribution</id>
<formats>
    <format>tar.gz</format>
</formats>
<includeBaseDirectory>false</includeBaseDirectory>
<dependencySets>
    <dependencySet>
        <outputDirectory></outputDirectory>
        <useProjectArtifact>false</useProjectArtifact>
        <fileMode>775</fileMode>
        <includes>
            <include>eu.els.inneo.tools:compare-files-shells</include>
        </includes>
        <unpack>true</unpack>
        <unpackOptions>
            <excludes>
                <exclude>META-INF/**</exclude>
                <exclude>META-INF</exclude>
            </excludes>
        </unpackOptions>
        <scope>runtime</scope>
    </dependencySet>
    <dependencySet>
        <outputDirectory>jars</outputDirectory>
        <useProjectArtifact>false</useProjectArtifact>
        <includes>
            <include>eu.els.inneo.tools:compare-files-xml</include>
            <include>eu.els.inneo.tools:compare-files-diff</include>
        </includes>
        <unpack>false</unpack>
        <scope>runtime</scope>
    </dependencySet>
</dependencySets>

之后转到185行，下面的代码存在，并在“globallanguage”输入“lang”变量的输入。

var globallanguage;

现在您已将用户的选择保存在“globallanguage”中。您可以转到所需的任何文件，并使用以下代码检索翻译。

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

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

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);
      }});

这不是一件非常令人兴奋的事情，但知道你可以用任何你想要的语言使用SweetAlerts或任何其他JS librady非常有用......

Answer 2

SweetAlert2模态与jquery-localize的本地化非常简单：

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

将"fr"替换为用户语言，应该是它。

Answer 3

为了进一步扩展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"
  }
}

如何使用localize.js翻译跨js文件。例如SweetAlert2.js

3 个答案: