jquery-i18n-properties多语言切换

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

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

2、创建文件目录,如下

jquery-i18n-properties多语言切换_第1张图片

然后编辑两个文件

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中定义

此处为切换语言的控件

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

  • 首页
  • TOX
  • 交易

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

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

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


    你可能感兴趣的:(jquery)