jq国际化jquery.i18n.properties简单使用,跟着步骤来,超级简单

jq国际化jquery.i18n.properties使用

最初使用jquery.i18n.properties是为了实现项目国际化中英文字段对照表,这样可以把中英文的翻译工作减轻不少,用法很简单,我就是在简单使用的基础上稍微简化了,按照步骤复制代码运行就可以
一、项目目录(i18n文件夹里面都是必须的文件)
在这里插入图片描述

二、运行效果(中英文对比)

在这里插入图片描述

三、实现过程
1、下载jquery.i18n.properties(前提需要引入jquery,并且i18n放在jq后面引入)
2、文件引入
在这里插入图片描述
3、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: "js", //资源文件名称
		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')));
			});
		}
	});
};
/**
 * 单独获取prop
 * @return
 */
var execI18nProp = function(contrastName) {
	var contrastValue = "";
	/* 需要引入 i18n 文件*/
	if($.i18n == undefined) {
		return false;
	};
	if(contrastName) {
		contrastValue = $.i18n.prop(contrastName);
	};
	return contrastValue
}

代码说明:1、$.i18n.properties方法里面的name是语言文件的前缀名称(和你自己的文件名一致就ok)
在这里插入图片描述
2、 $.i18n.properties方法里面的path一定要拼对
3、 $.i18n.properties里面的callback就是通过语言文件来赋值了,我是在需要转换的dom上加一个class=“i18n”,再加个属性contrastName,contrastName的值就是对的字段变量,由于input和普通dom的取法不一样,需要另外处理
4、execI18nProp是我自己加上去的,对于一些需要拼接显示的文字需要这个方法,通过字段名拿英文
在这里插入图片描述
5.js_en_US.properties文件(这个文件就叫properties文件,后缀就是properties,里面就是键值对的格式)

ALL_ORDERS=ALL
WAIT_EXPERIENCE=EXPE
WAIT_ARRIVE=ARRIVE
ORDER_WAIT_PAY=PAY
ORDER_WAIT_REFUND=REFUND

6.js_zn_CN.properties文件(和上面一样,就是把字段对应显示的英文换成中文)

ALL_ORDERS=全部
WAIT_EXPERIENCE=待体验
WAIT_ARRIVE=待到店
ORDER_WAIT_PAY=待支付
ORDER_WAIT_REFUND=待评价

7.html文件(这里我只放导航部分代码)

<ul>
	<li index="0" name="ALL_ORDERS" class="active"><span class="i18n" contrastName="ALL_ORDERS">全部</span></li>
	<li index="1" name="WAIT_EXPERIENCE"><span class="i18n" contrastName="WAIT_EXPERIENCE">待体验</span></li>
	<li index="2" name="WAIT_ARRIVE"><span class="i18n" contrastName="WAIT_ARRIVE">待到店</span></li>
	<li index="3" name="ORDER_WAIT_PAY"><span class="i18n" contrastName="ORDER_WAIT_PAY">待支付</span></li>
	<li index="4" name="ORDER_WAIT_REFUND"><span class="i18n" contrastName="ORDER_WAIT_REFUND">待评价</span></li>
</ul>

代码说明:上面说过只加了class和contrastName这俩个属性,language里面通过这两个属性赋值
8.js(只需要调用下execI18n方法,就可以使用喽~)
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42409975/article/details/106341363