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