jquery-i18n-properties多语言切换

jquery-i18n-properties 是一个用于在网页上切换不同语言的jquery插件，它的使用方法非常简单，下面让我们一起来学习吧！

1、下载 jquery-i18n-properties ，当然了在引入该插件前要先引入jquery

2、创建文件目录，如下

然后编辑两个文件

strings.properties(默认语言)

#头部导航
headTabs1=a
headTabs2=a
headTabs3=a

strings_zh.properties(中文语言)

#头部导航
headTabs1=首页
headTabs2=TOX
headTabs3=交易

注意：properties需要设置为utf-8格式，否则会出现乱码，首行加 # 可以为文件添加注释。

3、在javaScript中调用

var lang=sessionStorage.getItem("lang");
if(lang===null){
	lang="zh";
}
loadProperties(lang);
$("#lang").val(lang);
function loadProperties(types) {
	 $.i18n.properties({
		 name:'strings',    //属性文件名     命名格式： 文件名_国家代号.properties
		 path:'static/lang/',   //注意这里路径是你属性文件的所在文件夹
		 mode:'map',
		 language:types,     //这就是国家代号 name+language刚好组成属性文件名：strings+zh -> strings_zh.properties
		 callback:function(){
			$("[data-locale]").each(function(){
				$(this).html($.i18n.prop($(this).data("locale")));
			});
			$("[data-placeholder]").each(function(){
				$(this).attr('placeholder',$.i18n.prop($(this).data("placeholder")));
			});
		 }
	 });
 }
 
 //切换语言
$("#lang").on('change',function(){
	sessionStorage.setItem("lang",$(this).val());
	loadProperties($(this).val());
});

4、在HTML中定义

此处为切换语言的控件

<select name="" id="lang" class="form-control header-lang">
	<option checked value="zh">中文</option>
	<option value=" ">English</option>
</select>

此处为标记需要更改文字的代码

<li><a href="#" data-locale="headTabs1">首页</a></li>
<li><a href="#" data-locale="headTabs2">TOX</a></li>
<li><a href="#" data-locale="headTabs3">交易</a></li>

好了，大功告成，剩下的就是定义你要改变的data。

思考：如果你的页面文字太多，那么你需要翻译的东西就会很多，这绝对是一个体力活，这种方式其实是在前端进行翻译的，如果工作量太大，放在后端处理会不会更简单点呢？或者引入一个第三方的东西，比如谷歌浏览器右键会有一个选项翻译成中文，如果采用这样机器翻译，对用户肯定不太友好。但也是一种解决方案。

参考文章：https://blog.csdn.net/m0_37355951/article/details/77895585

jquery-i18n-properties多语言切换

猜你喜欢