jq國際化jquery.i18n.properties使用

使用jquery.i18n.properties可以實現網站中英文切換的功能，如果中英文頁面有很大不同的話，這種就不是很好，可以做參考開發

1. 引入一些文件
   jquery.i18n.properties.js

需要引入jquery，並且i18n放在jq后面引入

2. 新建文件

language_zh.properties （中文對照表，這個文件就叫properties文件，后綴就是properties，里面就是鍵值對的格式）

$.i18n.properties方法里面的name是語言文件的前綴名稱

TITLE = 標題
MORE = 更多
HOME = 主頁
PRODUCT = 產品

language_en.properties （英文對照表）

TITLE = title
MORE = more
HOME = home
PRODUCT = product

language.js

/**
 * 獲取瀏覽器語言類型
 * @return {string} 瀏覽器國家語言
 */
var getNavLanguage = function() {
	if(navigator.appName == "Netscape") {
		var navLanguage = navigator.language || navigator.userLanguage;
		return navLanguage.substr(0, 2);
	}
	return false;
}

/**
 * 設置語言類型： 默認為中文
 */
var i18nLanguage = "en_US";
/*
設置一下網站支持的語言種類
 */
var webLanguage = ['zh-CN', 'en_US'];
/**
 * 執行頁面i18n方法
 * @return
 */
var execI18n = function() {
	// 獲取瀏覽器語言
	var navLanguage = getNavLanguage();
	if(navLanguage) {
		// 判斷是否在網站支持語言數組里
		var charSize = $.inArray(navLanguage, webLanguage);
		if(charSize > -1) {
			i18nLanguage = navLanguage;
		};
	} else {
		console.log("not navigator");
		return false;
	}
	/* 需要引入 i18n 文件*/
	if($.i18n == undefined) {
		return false;
	};
	/*
	這里需要進行i18n的翻譯
	 */
	//      i18nLanguage="zh_CN";
	//      i18nLanguage="en_US";
	$.i18n.properties({
		name: "language", //資源文件名稱
		path: window.htmlURL + '/js/i18n/', //資源文件路徑
		mode: 'map', //用Map的方式使用資源文件中的值
		language: i18nLanguage,
		callback: function() { //加載成功后設置顯示內容
			var insertEle = $(".i18n");
			insertEle.each(function() {
				var contrastName = $(this).attr('contrastName');
				// 根據i18n元素的 contrastName 獲取內容寫入
				if(contrastName) {
					$(this).html($.i18n.prop(contrastName));
				};
			});
			var insertInputEle = $(".i18n-input");
			insertInputEle.each(function() {
				var selectAttr = $(this).attr('selectattr');
				if(!selectAttr) {
					selectAttr = "value";
				};
				$(this).attr(selectAttr, $.i18n.prop($(this).attr('contrastName')));
			});
                        var oPlaceholder = $('input[placeholder], textarea[placeholder]');
			oPlaceholder.each(function() {
				var inputPlaceholder = $(this).attr('inputPlaceholder');
				if(inputPlaceholder) {
					$(this).attr('placeholder', $.i18n.prop(inputPlaceholder));
				};
			});
		}
	});
};
/**
 * 單獨獲取prop
 * @return
 */
var execI18nProp = function(contrastName) {
	var contrastValue = "";
	/* 需要引入 i18n 文件*/
	if($.i18n == undefined) {
		return false;
	};
	if(contrastName) {
		contrastValue = $.i18n.prop(contrastName);
	};
	return contrastValue
}

// execI18nProp 對於一些需要拼接顯示的文字需要這個方法，通過字段名拿英文
var workStatusText = function(status, timeFlag) {
    if(status == 5 || status == 0 ){
        return {"text": "未開始", "color": "gray-color"}
    }else if(status == 1){
        return {"text": "進行中", "color": "blue-font"}
    }else if(status == 2){
        return {"text": execI18nProp("complete"), "color": "green-color"}
    }else{
        return null;
    }
}

// 執行函數，上面的代碼可以根據需求自定義開發
execI18n();

3. html中使用

<div name="more" class="active"><span class="i18n" contrastName="more">全部</span></div>

參考博客