我是参考播客做了个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:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title class="i18n" name='title'></title>
  6. <meta name="viewport" content="width=device-width">
  7. <style type="text/css">
  8.     .lan1{
  9.         float: left;
  10.     }
  11.     .lan2{
  12.         float: right;
  13.         margin-right: 100px;
  14.     }
  15. </style>
  16. </head>
  17. <body>
  18.     <div>
  19.         <div class="lan1"><label class="i18n" name="lan"></label></div>
  20.         <div class="lan2">
  21.             <select id="language">
  22.                 <option value="zh-CN">中文简体</option>
  23.                 <option value="zh-TW">中文繁體</option>
  24.                 <option value="en">English</option>
  25.             </select>
  26.         </div>
  27.     </div>
  28.     <br>
  29.     <hr>
  30.     <div><label class="i18n" name="hellomsg1"></label><label class="i18n" name="hellomsg2"></label></div><br>
  31.     <div><label class="i18n" name="commonmsg1"></label><label class="i18n" name="commonmsg2"></label></div><br>
  32.     <div>
  33.         <input type="search" class="i18n-input" selectname="searchPlaceholder" selectattr="placeholder">
  34.     </div>
  35.     <script src="js/jquery.min.js"></script>
  36.     <script src="js/jquery.i18n.properties.min.js"></script>
  37.     <script src="js/language.js"></script>
  38. </body>
  39. </html>

language.js:

  1. /**
  2.  * cookie操作
  3.     1.name and value given , set cookie;
  4.     2.name given, value is null, delete cookie;
  5.     3.name given, value is undefined, get cookie;
  6.  */
  7. var getCookie = function(name, value, options) {
  8.     if (typeof value != 'undefined') { // name and value given, set cookie
  9.         options = options || {};
  10.         if (value === null) {
  11.             value = '';
  12.             options.expires = -1;
  13.         }
  14.         var expires = '';
  15.         if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
  16.             var date;
  17.             if (typeof options.expires == 'number') {
  18.                 date = new Date();
  19.                 date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
  20.             } else {
  21.                 date = options.expires;
  22.             }
  23.             expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
  24.         }
  25.         var path = options.path ? '; path=' + options.path : '';
  26.         var domain = options.domain ? '; domain=' + options.domain : '';
  27.         var s = [cookie, expires, path, domain, secure].join('');
  28.         var secure = options.secure ? '; secure' : '';
  29.         var c = [name, '=', encodeURIComponent(value)].join('');
  30.         var cookie = [c, expires, path, domain, secure].join('')
  31.         document.cookie = cookie;
  32.     } else { // only name given, get cookie
  33.         var cookieValue = null;
  34.         if (document.cookie && document.cookie != '') {
  35.             var cookies = document.cookie.split(';');
  36.             for (var i = 0; i < cookies.length; i++) {
  37.                 var cookie = jQuery.trim(cookies[i]);
  38.                 // Does this cookie string begin with the name we want?
  39.                 if (cookie.substring(0, name.length + 1) == (name + '=')) {
  40.                     cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
  41.                     break;
  42.                 }
  43.             }
  44.         }
  45.         return cookieValue;
  46.     }
  47. };
  48.  
  49. /**
  50.  * 获取浏览器语言类型
  51.  * @return {string} 浏览器国家语言
  52.  */
  53. var getNavLanguage = function(){
  54.     if(navigator.appName == "Netscape"){
  55.         var navLanguage = navigator.language;
  56.         return navLanguage.substr(0,2);
  57.     }
  58.     return false;
  59. }
  60.  
  61. /**
  62.  * 设置语言类型： 默认为中文
  63.  */
  64. var i18nLanguage = "zh-CN";
  65.  
  66. /*
  67. 设置一下网站支持的语言种类
  68.  */
  69. var webLanguage = ['zh-CN', 'zh-TW', 'en', 'zh'];
  70.  
  71. /**
  72.  * 执行页面i18n方法
  73.  * @return
  74.  */
  75. var execI18n = function(){
  76.     /*
  77.         首先获取用户浏览器设备之前选择过的语言类型
  78.      */
  79.     if (getCookie("Language")) {
  80.         i18nLanguage = getCookie("Language");
  81.     } else {
  82.         // 获取浏览器语言
  83.         var navLanguage = getNavLanguage();
  84.         if (navLanguage) {
  85.             // 判断是否在网站支持语言数组里
  86.             var charSize = $.inArray(navLanguage, webLanguage);
  87.             if (charSize > -1) {
  88.                 i18nLanguage = navLanguage;
  89.                 getCookie("Language",navLanguage,{       // 存到缓存中
  90.                     expires: 30,
  91.                     path:'/'
  92.                 });
  93.             };
  94.         } else{
  95.             console.log("not navigator");
  96.             return false;
  97.         }
  98.     }
  99.  
  100.     /* 需要引入 i18n 文件*/
  101.     if ($.i18n == undefined) {
  102.         console.log("请引入jquery.i18n.properties.js文件")
  103.         return false;
  104.     };
  105.  
  106.     /*
  107.         这里需要进行i18n的翻译
  108.      */
  109.     jQuery.i18n.properties({
  110.         name: 'opqt',
  111.         path: 'i18n/',
  112.         mode : 'map',                       //用Map的方式使用资源文件中的值
  113.         language : i18nLanguage,
  114.         cache:false,
  115.         encoding: 'UTF-8',
  116.         callback : function() {             //加载成功后设置显示内容
  117.             var insertEle = $(".i18n");
  118.             console.log(".i18n 写入中...");
  119.             insertEle.each(function() {
  120.                 $(this).html($.i18n.prop($(this).attr('name')));    // 根据i18n元素的 name 获取内容写入
  121.             });
  122.             console.log("写入完毕");
  123.  
  124.             console.log(".i18n-input 写入中...");
  125.             var insertInputEle = $(".i18n-input");
  126.             insertInputEle.each(function() {
  127.                 var selectAttr = $(this).attr('selectattr');
  128.                 if (!selectAttr) {
  129.                     selectAttr = "value";
  130.                 };
  131.                 $(this).attr(selectAttr, $.i18n.prop($(this).attr('selectname')));
  132.             });
  133.             console.log("写入完毕");
  134.         }
  135.     });
  136. }
  137.  
  138. $(function(){
  139.  
  140.     /*执行I18n翻译*/
  141.     execI18n();
  142.  
  143.     /*将语言选择默认选中缓存中的值*/
  144.     $("#language option[value="+i18nLanguage+"]").attr("selected",true);
  145.  
  146.     /* 选择语言 */
  147.     $("#language").on('change', function() {
  148.         var language = $(this).children('option:selected').val()
  149.         getCookie("Language",language,{
  150.             expires: 30,
  151.             path:'/'
  152.         });
  153.         location.reload();
  154.     });
  155. });

因为中文和繁体文拷贝到properties文件中就变成了unicode字符了，不认得，拷贝英文的一份：

opqt_en.properties：

  1. title=i18n Resource Internationalization
  2.  
  3. lan=Language\uFF1A
  4. hellomsg1=Index message:
  5. hellomsg2=Hello word! This is index message!
  6. searchPlaceholder=Please input serach information
  7.  
  8. commonmsg1=Common message:
  9. commonmsg2=This is common message!

其他中文和繁体文：把原播客里面的贴过来吧：

opqt.properties、opqt_zh.properties、opqt_zh_CN.properties:

  1. title=i18n资源国际化
  2.  
  3. lan=语言选择：
  4. hellomsg1=首页消息:
  5. hellomsg2=资源国际化！这是首页消息!
  6. searchPlaceholder=请输入搜索信息
  7. commonmsg1=通用消息:
  8. commonmsg2=资源国际化!这是通用消息哦!

opqt_zh_TW.properties:

  1. title=i18n資源國際化
  2.  
  3. lan=語言選擇：
  4. hellomsg1=首頁消息:
  5. hellomsg2=資源國際化! 这是首頁消息！
  6. searchPlaceholder=請輸入搜索信息
  7. commonmsg1=通用消息:
  8. 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

上传上去了，但是不知道怎么引用这个下载连接...

基于jQuery.i18n.properties实现前端网站语言多版本的更多相关文章

  1. 【转】jQuery之前端国际化jQuery.i18n.properties

    jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties

  2. jquery.i18n.properties前端国际化解决方案“填坑日记”

    但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很 ...

  3. 前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”

    前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...

  4. 使用 jQuery.i18n.properties 实现 Web 前端的国际化

    jQuery.i18n.properties 简介 在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization, ...

  5. jQuery之前端国际化jQuery.i18n.properties

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,"i& ...

  6. jQuery之前端国际化jQuery.i18n.properties[转]

    http://www.ibm.com/developerworks/cn/web/1305_hezj_jqueryi18n/ jQuery.i18n.properties是一款轻量级的jQuery国际 ...

  7. Web前端国际化之jQuery.i18n.properties

    Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍 国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...

  8. jquery.i18n.properties前端国际化方案

    如果新项目要做系统国际化, 时下热门的任何一种技术选型都有成熟的方案,比如: vue + vue-i18n angular + angular-translate react + react-intl ...

  9. 本地化web开发的一个例子-jquery.i18n.properties

    关键字:Web本地化, jquery,jquery.i18n.properties. 运行环境:Chrome, IE. 本文介绍使用jquery.i18n.properties对网站前端实现本地化,支 ...

随机推荐

  1. struts2的execAndWait拦截器

    struts2中有许多默认拦截器,这里我们看一下execAndWait拦截器. 当一个页面需要加载一段时间的时候,我们希望它不是一直呆在原页面直到加载完成,而是进入等待页面,加载完毕后自动进入目标页面 ...

  2. SharePoint 会话(Session)状态和状态服务

    1. 启用会话状态 Enable-SPSessionStateService –DefaultProvision 或 Enable-SPSessionStateService –DatabaseNam ...

  3. 深入理解Linux网络技术内幕——Notification内核通知表链

    为什么要有内核通知表链:     Linux由多个相互依赖的子系统组成.其中一些子系统可能需要对其他子系统的一些事件感兴趣.这样子系统之间需要一些通信机制来实现这一功能.     在接触Notific ...

  4. IIS7 经典模式和集成模式的区别

    IIS7.0中的Web应用程序有两种配置形式:经典形式和集成形式. 经典形式是为了与之前的版本兼容,运用ISAPI扩展来调用ASP.NET运转库,原先运转于IIS6.0下的Web应用程序迁移到IIS7 ...

  5. Android的界面设计工具——DroidDraw

    软件名称:DroidDraw 软件大小:489KB(Windows版本) 支持系统:Mac OS X/Windows/Linux 下载地址:http://code.google.com/p/droid ...

  6. 2018-2019-2 20165212 《网络对抗技术》Exp3 免杀原理与实践

    2018-2019-2 20165212 <网络对抗技术>Exp3 免杀原理与实践 一.实验内容 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion ...

  7. Django中提供了6种缓存方式

    开发调试 内存 文件 数据库 Memcache缓存(python-memcached模块) Memcache缓存(pylibmc模块) 1. 开发调试 1 2 3 4 5 6 7 8 9 10 11 ...

  8. 命令行net time同步时间（内网）

    首先还是推荐大家使用Internet时间来同步自己计算机的时间,这样做主要是方便,就是设置一个ntp服务器,我推荐下面的三个ntp服务器地址. time.asia.apple.com //亲测有效 a ...

  9. 初探Net框架下的XML编程技术

    一．前言: XML是微软.Net战略的一个重要组成部分,而且它可谓是XML Web服务的基石,所以掌握.Net框架下的XML技术自然显得非常重要了.本文将指导大家如何运用C#语言完成.Net框架下的X ...

  10. php过滤html标签截取部分内容

    <?php $str = '<span>fdsfsdf</span><a href="#">href</a>'; echo h ...