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");
if(lang===null){
	;
}
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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-locale="headTabs1">首頁</a></li>
<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-locale="headTabs2">TOX</a></li>
<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-locale="headTabs3">交易</a></li>
           

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

思考：如果你的頁面文字太多，那麼你需要翻譯的東西就會很多，這絕對是一個體力活

，這種方式其實是在前端進行翻譯的，如果工作量太大，放在後端處理會不會更簡單點呢？或者引入一個第三方的東西，比如谷歌浏覽器右鍵會有一個選項  翻譯成中文  ，如果采用這樣機器翻譯，對使用者肯定不太友好。但也是一種解決方案。

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