林秀栋的技术博客

用jquery.i18n搭建基于jq的多语种网页

注意

请在服务器端运行该程序。因为 XMLHttpRequest cannot load file:xxx.

网上搜到的大多是jquery-i18n-properties，与这里使用的不是同一个插件

本文使用的是jquery.i18n.js

使用时只要引入jq，后引入该插件即可

demo

<body>
    <!-- 显示的主体内容 -->
    <div i18n="footer.about">About</div>
    <div i18n="footer.contact">Contact us</div>
    <!-- 切换按钮 -->
    <button type="button" class="chinese">切换为中文</button>
    <button type="button" class="english">switch to english</button>
</body>

<script src="./jquery.min.js"></script>
<script src="./jquery.i18n.min.js"></script>
<script>
    $(document).ready(function() {
        //默认语言
        var defaultLang = "cn";
        //初始化
        $("[i18n]").i18n({
            defaultLang: defaultLang,   //文件名后缀，比如初始化时是 cn
            filePath: "./i18n/",    //json文件路径
            filePrefix: "i18n_",    //文件名前缀，加上后缀即 i18n_cn
            fileSuffix: "", //基本用不到的后后缀，最终文件名为filePrefix+defaultLang+fileSuffix
            forever: true,  //cookie存储相关设置
            callback: function() {
                console.log("i18n has been completed.");
            }
        });
        /*切换为中文 - 按钮*/
        $(".chinese").click(function() {
            $("[i18n]").i18n({
                filePath: "./i18n/",
                defaultLang: "cn",
            });
        });
        /*切换为英文 - 按钮*/
        $(".english").click(function() {
            $("[i18n]").i18n({
                filePath: "./i18n/",
                defaultLang: "en",
            });
        });
    });
</script>

//i18n_cn.json
{
    "footer.about": "关于",
    "footer.contact": "联系我们"
}
//i18n_en.json
{
    "footer.about": "About",
    "footer.contact": "Contact us"
}

该插件的原理是找到有i18n属性的标签，并替换其中的text

所以使用时要注意

对于第2点，解决方法1是加入新html后用下面语句把页面重新替换一遍

$("[i18n]").i18n({
    filePath: "./i18n/",
    defaultLang: "cn",
});

解决方法2是修改源码，插件中使用$.getJSON读取对应json并把数据存放在内部变量 i18nLang 中，我们可以把变量改为全局的

window.i18nLang = i18nLang;

然后其他js中，append字符串时可以使用改变量先把字符串的文字设置好

var str = '<p>' + i18nLang["textForP"] + '</p>';
dom.append(str);

此外一些layer插件需要设置msg等情况，也可以用i18nLang[‘xxx’]，或者说这种情况必须用该方法，否则难以实现多语言的layer

i18nOnly

默认会将HTML元素的placeholder、value、html一起进行翻译替换，如果您只需要替换其中一个，可以在HTML标签中声明 i18nOnly 属性。

<input i18n="i18n.test" i18n-only="placeholder" placeholder="多语言"></input>

其他一些坑

标签中必须有空格

由于插件的原理是替换标签数据，那么标签内其实可以不写内容，但下面的写法却无法渲染

<span i18n="info.price"></span>

看了源码发现其中对val和html都有非空判断，若为空就不渲染了。

所以标签内必须有内容才能正常渲染，最终选择了一个空格

<span i18n="info.price"> </span>

json的文件格式

本想用如下格式

{
    a: {
        b: 1
    }
}

但这样i18n=”a.b”后无效

原来插件内用了 i18nLang[$(this).attr(“i18n”)] 来获取数据，相当于 i18nLang[‘a.b’]，只能拿到一级数据，无法获取第二级

最终使用如下格式

{
    a.b: 1
}

同步获取json

由于把插件中得到的json数据设置为全局了，为保证后面的js可以取到json数据，json请求应该是同步的，所以要把插件中的请求设置为同步

$.ajaxSettings.async = false;
$.getJSON();
$.ajaxSettings.async = true;

点击切换语言时的设置

当要点击某按钮切换语言时，下面写法一直报错，最终发现原来插件中有默认路径设置，点击时也要加上对应路径，否则会使用默认设置导致找不到json

$("[i18n]").i18n({
    filePath: "./i18n/",    //如果路径与默认不一致，则每次都需要加
    defaultLang: "en"
});