顾名思义,用jquery.i18n首先需要引入jquery。
头部文件如下
<script src="/assets-new/plugins/jquery/jquery.min.js"></script>
<script src="/assetsnew/jquery.i18n.js"></script>
<script src="/assetsnew/lang-en.js"></script>//英文js
主要内容:
<ol class="breadcrumb">
<li class="breadcrumb-item" id="ex1">你好</li>
<li class="breadcrumb-item active" id="ex2">欢迎</li>
</ol>
lang-en.js如下:
i18n_dict = {
"你好": "hellow",
"欢迎": "welcome",
};
$.i18n.load(i18n_dict);
var en = function(event) {
// 公共部分
$('#ex1')._t('你好');
$('#ex2')._t('欢迎');
};
$('#translate_button').click(function () {//点击按钮时进行语言切换
en();
});
思路扩展:想下次进来还是上一次选择的语言可以加一个cookie
优点:在进行语言切换时,速度很快,不会进行页面刷新。适合静态页面使用。
缺点:当页面中有动态注入的内容时可能会出现翻译不了的情况。每个需要翻译的地方都要加一个id或class,比较麻烦。