AI智能
改变未来

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=ALLWAIT_EXPERIENCE=EXPEWAIT_ARRIVE=ARRIVEORDER_WAIT_PAY=PAYORDER_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方法,就可以使用喽~)

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » jq国际化jquery.i18n.properties简单使用,跟着步骤来,超级简单