i18n 在 jq 中的多语言实现方式

最新推荐文章于 2024-09-20 12:01:11 发布

CPan_

最新推荐文章于 2024-09-20 12:01:11 发布

阅读量1.1k

点赞数 1

分类专栏： jq i18n 文章标签： jq i18n 语言包

本文链接：https://blog.csdn.net/CPan_/article/details/87773803

版权

jq 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

i18n

1 篇文章 0 订阅

订阅专栏

1.原生JS实现多语言

html：
<section class="table_sec">
           <h1 id="locale">en</h1>
            <h3 data-trans="js_gloTitle">你好</h3>
            <h3 data-trans="js_m">这是原生JS 实现的多语言！</h3>
       </section>

JavaScript

window.global_lan = localStorage.language || window.navigator.language;
setTranslate(global_lan);//设置默认语言
var t = /^zh/.test(global_lan);
$("#locale").text(t ? "en" : "cn");
// 获取所有需要翻译的结构化数据
var r = $("[data-trans]");
console.log(getTranslate('js_gloTitle'))
Array.prototype.forEach.call(r, function (e) {
var attrName = e.getAttribute("data-trans");//获取需要设置多语言的标签
e.textContent = getTranslate(attrName);//设置语言
console.log(attrName)
console.log(getTranslate(attrName))
})
// 手动切换语言 en or zh
$("#locale").off('click').on("click", function () {
localStorage.setItem("language", t ? "en" : "zh");
setTranslate(global_lan);
e();
});
})()
});

</script>

2.I18n插件实现多语言

引入文件

语言包目录：
I18N文件夹

html：

<li><a href="obout.html#services" data-lang="nav_about_serv">SERVICES</a></li>
<li><a href="obout.html#micro_influ" data-lang="nav_micro_influ">MICRO-INFLUENCERS</a></li>
<li><a href="obout.html#our_clients" data-lang="nav_our_clients">OUR CLIENTS</a></li>

JS：

// 语言包
loadProperties();
function loadProperties(langType) {
var langType=langType||'en';
$.i18n.properties({
name:'strings', //属性文件名命名格式：文件名_国家代号.properties
path:'./i18n/', //注意这里路径是你属性文件的所在文件夹
mode:'map',
language:langType, //这就是国家代号 name+language刚好组成属性文件名：strings+zh -> strings_zh.properties
callback:function(){
$("[data-lang]").each(function(){

$(this).html($.i18n.prop($(this).data("lang")));

});
}
});
}
// 切换语言
// $("#lang").on('change',function(){
   //    sessionStorage.setItem("langType",$(this).val());
   //    loadProperties($(this).val());
   // });
   $("#l_cn").click(function(){
       console.log("cn")
       sessionStorage.setItem("langType",'cn');
       loadProperties('cn');
   })
   $("#l_en").click(function(){
       console.log("langType","en")
       sessionStorage.setItem("langType",'en');
       loadProperties('en');
   })