使用i18n實現頁面國際化
阿新 • • 發佈:2019-01-07
頁面引用的外掛
<script type="text/javascript" src="${path}/plugings/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${path}/js/jquery.i18n.properties.min.js"></script>
以下是頁面引用的js
/**
* 設定語言型別: 預設為中文 */ var i18nLanguage = "zh-CN"; /* 設定一下網站支援的語言種類 zh-CN(中文簡體)、en(英語) */ var webLanguage = ['zh-CN', 'en']; //獲取網站語言 function getWebLanguage(){ //1.cookie是否存在 if (jQuery.cookie("userLanguage")) { i18nLanguage = jQuery.cookie("userLanguage"); console.log("language cookie is "+i18nLanguage); } else { //2.1 獲取使用者設定的瀏覽器語言 var navLanguage = getNavLanguage(); console.log("user set browser language is "+navLanguage); if (navLanguage) { // 判斷是否在網站支援語言數組裡 var charSize = $.inArray(navLanguage, webLanguage); if (charSize > -1) { i18nLanguage = navLanguage; // 存到快取中 jQuery.cookie("userLanguage ",navLanguage, { expires : 7 }); }; } else{ console.log("not navigator"); return false; } } }
//國際化easyui中英文包
function changeEasyuiLanguage(languageName) {
// when login in China the language=zh-CN
var src =$.contextPath+"/plugings/jquery-easyui/locale/easyui-lang-"+languageName.replace('-','_')+".js";
console.log(src);
$.getScript(src);
};
/** * 執行頁面i18n方法 * @return * @author LH */ var execI18n = function(){ //獲取網站語言(i18nLanguage,預設為中文簡體) getWebLanguage(); //國際化頁面 jQuery.i18n.properties({ name : "common", //資原始檔名稱 path : $.contextPath+"/i18n/"+i18nLanguage+"/", //資原始檔路徑 mode : 'map', //用Map的方式使用資原始檔中的值 language : i18nLanguage, cache:false, //指定瀏覽器是否對資原始檔進行快取,預設false encoding: 'UTF-8', //載入資原始檔時使用的編碼。預設為 UTF-8。 callback : function() {//載入成功後設置顯示內容 //以下是將要國際化的文字內容 //退出 $("#logOut").html($.i18n.prop('logOut')); //使用者 $("#loginUser").html($.i18n.prop('loginUser')) } }); }
/*頁面執行載入執行*/
$(function(){
/*執行I18n翻譯*/
execI18n();
console.log("網站語言: "+i18nLanguage);
//國際化easyui
changeEasyuiLanguage(i18nLanguage);
});
國際化的檔案存放路徑,zh-CN表示簡體中文;en表示英語;也可擴充套件其它語言,只要在i18n資料夾下新增對應的檔案;key要一一對應,value則是文字的語言內容
中文的common.properties檔案內容
login.userName=Username
login.passWord=Password
login.sub=Login
login.reset=Reset
login.anonymous=Anonymous
英文的common.properties檔案內容
login.userName=Username
login.passWord=Password
login.sub=Login
login.reset=Reset
login.anonymous=Anonymous