1. 程式人生 > >使用i18n實現頁面國際化

使用i18n實現頁面國際化

頁面引用的外掛

<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