基于jQuery.i18n.properties实现前端网站语言多版本
我是参考播客做了个demo：http://blog.csdn.net/aixiaoyang168/article/details/49336709
jQuery.i18n.properties采用.properties文件对JavaScript进行国际化。jQuery.i18n.properties插件首先加载默认的资源文件（strings.properties），然后加载针对特定语言环境的资源文件（strings_zh.properties），这就保证了在未提供某种语言的翻译时，默认值始终有效。
一、demo代码：
首页index.html:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title class="i18n" name='title'></title> <meta name="viewport" content="width=device-width"> <style type="text/css"> .lan1{ float: left; } .lan2{ float: right; margin-right: 100px; } </style> </head> <body> <div> <div class="lan1"><label class="i18n" name="lan"></label></div> <div class="lan2"> <select id="language"> <option value="zh-CN">中文简体</option> <option value="zh-TW">中文繁體</option> <option value="en">English</option> </select> </div> </div> <br> <hr> <div><label class="i18n" name="hellomsg1"></label><label class="i18n" name="hellomsg2"></label></div><br> <div><label class="i18n" name="commonmsg1"></label><label class="i18n" name="commonmsg2"></label></div><br> <div> <input type="search" class="i18n-input" selectname="searchPlaceholder" selectattr="placeholder"> </div> <script src="js/jquery.min.js"></script> <script src="js/jquery.i18n.properties.min.js"></script> <script src="js/language.js"></script> </body> </html>
language.js:
/** * cookie操作 1.name and value given , set cookie; 2.name given, value is null, delete cookie; 3.name given, value is undefined, get cookie; */ var getCookie = function(name, value, options) { if (typeof value != 'undefined') { // name and value given, set cookie options = options || {}; if (value === null) { value = ''; options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE } var path = options.path ? '; path=' + options.path : ''; var domain = options.domain ? '; domain=' + options.domain : ''; var s = [cookie, expires, path, domain, secure].join(''); var secure = options.secure ? '; secure' : ''; var c = [name, '=', encodeURIComponent(value)].join(''); var cookie = [c, expires, path, domain, secure].join('') document.cookie = cookie; } else { // only name given, get cookie var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } }; /** * 获取浏览器语言类型 * @return {string} 浏览器国家语言 */ var getNavLanguage = function(){ if(navigator.appName == "Netscape"){ var navLanguage = navigator.language; return navLanguage.substr(0,2); } return false; } /** * 设置语言类型： 默认为中文 */ var i18nLanguage = "zh-CN"; /* 设置一下网站支持的语言种类 */ var webLanguage = ['zh-CN', 'zh-TW', 'en', 'zh']; /** * 执行页面i18n方法 * @return */ var execI18n = function(){ /* 首先获取用户浏览器设备之前选择过的语言类型 */ if (getCookie("Language")) { i18nLanguage = getCookie("Language"); } else { // 获取浏览器语言 var navLanguage = getNavLanguage(); if (navLanguage) { // 判断是否在网站支持语言数组里 var charSize = $.inArray(navLanguage, webLanguage); if (charSize > -1) { i18nLanguage = navLanguage; getCookie("Language",navLanguage,{ // 存到缓存中 expires: 30, path:'/' }); }; } else{ console.log("not navigator"); return false; } } /* 需要引入 i18n 文件*/ if ($.i18n == undefined) { console.log("请引入jquery.i18n.properties.js文件") return false; }; /* 这里需要进行i18n的翻译 */ jQuery.i18n.properties({ name: 'opqt', path: 'i18n/', mode : 'map', //用Map的方式使用资源文件中的值 language : i18nLanguage, cache:false, encoding: 'UTF-8', callback : function() { //加载成功后设置显示内容 var insertEle = $(".i18n"); console.log(".i18n 写入中..."); insertEle.each(function() { $(this).html($.i18n.prop($(this).attr('name'))); // 根据i18n元素的 name 获取内容写入 }); console.log("写入完毕"); console.log(".i18n-input 写入中..."); var insertInputEle = $(".i18n-input"); insertInputEle.each(function() { var selectAttr = $(this).attr('selectattr'); if (!selectAttr) { selectAttr = "value"; }; $(this).attr(selectAttr, $.i18n.prop($(this).attr('selectname'))); }); console.log("写入完毕"); } }); } $(function(){ /*执行I18n翻译*/ execI18n(); /*将语言选择默认选中缓存中的值*/ $("#language option[value="+i18nLanguage+"]").attr("selected",true); /* 选择语言 */ $("#language").on('change', function() { var language = $(this).children('option:selected').val() getCookie("Language",language,{ expires: 30, path:'/' }); location.reload(); }); });
因为中文和繁体文拷贝到properties文件中就变成了unicode字符了，不认得，拷贝英文的一份：
opqt_en.properties：
title=i18n Resource Internationalization lan=Language\uFF1A hellomsg1=Index message: hellomsg2=Hello word! This is index message! searchPlaceholder=Please input serach information commonmsg1=Common message: commonmsg2=This is common message!
其他中文和繁体文：把原播客里面的贴过来吧：
opqt.properties、opqt_zh.properties、opqt_zh_CN.properties:
title=i18n资源国际化 lan=语言选择： hellomsg1=首页消息: hellomsg2=资源国际化！这是首页消息! searchPlaceholder=请输入搜索信息 commonmsg1=通用消息: commonmsg2=资源国际化!这是通用消息哦!
opqt_zh_TW.properties:
title=i18n資源國際化 lan=語言選擇： hellomsg1=首頁消息: hellomsg2=資源國際化! 这是首頁消息！ searchPlaceholder=請輸入搜索信息 commonmsg1=通用消息: commonmsg2=資源國際化!這是通用消息哦!
二、原文中代码解释：
label class=”i18n” name=”hellomsg1”这里面class=”i18n”写法，下边在js里面我们可以根据类选择器获取需要国际化的地方，然后name=”hellomsg1”这里面的hellomsg1跟资源文件里面的key保持一致。获取方式二：input type=”search” class=”i18n-input” selectname=”searchPlaceholder” selectattr=”placeholder”这里面的class=”i18n-input”写法，跟上边的区别就是可以给html标签的任何属性可以赋值，例如placeholder，name，id什么的都可以，selectattr=”placeholder”里面的placeholder就是要赋值的属性，selectname=”searchPlaceholder”里面的searchPlaceholder跟资源文件里面的key保持一致。
效果图：
http://localhost:8080/jqueryi18n/index.html
源代码：上传到博客资源里面；jqueryi18n.rar
上传上去了，但是不知道怎么引用这个下载连接...
