网页中文转英文（国际化）

背景：

我的项目是已经完成的项目，因为要拓展海外市场，需要支持英文。

采用的方式是添加配置文件，见下文详细步骤。

本文基本转自：http://blog.csdn.net/wuhawang/article/details/52228589

在他的基础上给大家一点提示补充：

1.将需要的js文件与其他公共js一起加载；

2.js中部分中文需要改写代码根据按钮取值来显示；

3.注意全局方法中的中文名不要忘记替换；

4.log日志不要改后台，直接再写一个js去匹配中文即可

5.个别插件会自动根据浏览器语言来展示按钮名称，设置浏览器默认的语言即可

下面为转载内容：

1.相关jar包下载

下载jquery.locale.js,下载地址为  https://github.com/coderifous/jquery-localize   将下载后的包加入到工程中即可使用.

然后web-xml中要加上

[html] view plain copy

print ?

1. <servlet-mapping>  
2.     <servlet-name>default</servlet-name>  
3.     <url-pattern>*.json</url-pattern>  
4. </servlet-mapping>  

<servlet-mapping>
	<servlet-name>default</servlet-name>
	<url-pattern>*.json</url-pattern>
</servlet-mapping>

用来拦截json格式的数据,因为配置文件是以json文件的格式进行存储的.

2.中英文切换方案

a)  json文件

配置好相关的jar包和web-xml后,我们在工程里对应的目录为相应的语言创建json文件,其中英文定义如下图所示,这里注意中文对应的要使用utf-8的格式进行存储(可以百度转义),否则页面会显示乱码.这里存储为text-zh.json和text-en.json两个文件

英文文件

中文文件

其中如果需要引用某个字段的中英文,则为nav.index此类样式

b)  jsp页面

在header.jsp页面上(这里demo中假设对header进行中英文切换),添加select控件,如下所示,当select值改变后,触发方法chgLang.

[html] view plain copy

print ?

1. <select id="ddlSomoveLanguage" onchange="chgLang();">  
2.                <option value="zh">中文</option>  
3.                <option value="en">ENGLISH</option>  
4. </select>  

<select id="ddlSomoveLanguage" οnchange="chgLang();">
               <option value="zh">中文</option>
               <option value="en">ENGLISH</option>
</select>

这里,假设修改中英文后,改变导航栏header.jsp的的中英文,所以还需要在nav.jsp里修改显示的值,如下所示.通过我们对每个需要显示的a标签,data-localize属性设置为对应的json文件里字段的名字,比如定义对象,就为data-localize=”nav.defineObj”.

[html] view plain copy

print ?

1. <ul class="dropdown-menu">  
2.                 <li><a id="action-1" data-localize="nav.defineObj" href="IdeJsp/defineObjSelect.jsp"></a></li>  
3.                 <li><a data-localize="nav.defineTable" href="IdeJsp/defineTab.jsp"></a></li>  
4.                 <li><a data-localize="nav.operateSql"  href="IdeJsp/ideSql.jsp"></a></li>  
5. </ul>  

<ul class="dropdown-menu">
                <li><a id="action-1" data-localize="nav.defineObj" href="IdeJsp/defineObjSelect.jsp"></a></li>
              	<li><a data-localize="nav.defineTable" href="IdeJsp/defineTab.jsp"></a></li>
              	<li><a data-localize="nav.operateSql"  href="IdeJsp/ideSql.jsp"></a></li>
</ul>

c)  js文件

js文件负责控制页面切换以及coockies记录点击语言历史的功能.其代码如下所示,文件名为language-coockies.js,其中

$("[data-localize]").localize("text", {pathPrefix:"lang", language:"en"});pathPrefix表示json文件路径的前缀,text和en对应文件名text-en.json

[javascript] view plain copy

print ?

1. var name = "somoveLanguage";       
2.       function  chgLang() {  
3.          var value = $("#ddlSomoveLanguage").children('option:selected').val();   
4.         SetCookie(name,value);  
5.         location.reload();    
6.            }       
7.       function  SetCookie(name,value){   
8.       var Days = 30; //此 cookie 将被保存 30 天  
9.           var exp = new Date();    //new Date("December 31, 9998");  
10.           exp.setTime(exp.getTime() + Days*24*60*60*1000);  
11.           document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();  
12.        }  
13.     function getCookie(name)//取cookies函数     
14.     {  
15.     var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));  
16.      if(arr != null) return unescape(arr[2]); return null;  
17.     }  
18.     $(function() {  
19.         var uulanguage = (navigator.language || navigator.browserLanguage).toLowerCase();  
20.                 if (uulanguage.indexOf("en") > -1) {  
21.                     $("[data-localize]").localize("text", {pathPrefix: "lang", language: "en"});  
22.                }else if (uulanguage.indexOf("zh") > -1) {  
23.                  $("[data-localize]").localize("text", {pathPrefix: "lang", language: "zh"});  
24.               }else{  
25.               $("[data-localize]").localize("text", {pathPrefix: "lang", language: "en"});  
26.               };          
27.          if (getCookie(name) != "") {  
28.              if (getCookie(name) == "zh") {  
29.                  $("[data-localize]").localize("text", {pathPrefix: "lang", language: "zh"});   
30.             }  
31.              if (getCookie(name) == "en") {  
32.                  $("[data-localize]").localize("text", {pathPrefix: "lang", language: "en"});       
33.             }  
34.         }  
35.     });  

var name = "somoveLanguage";	 
      function  chgLang() {
		 var value = $("#ddlSomoveLanguage").children('option:selected').val();	
	  	SetCookie(name,value);
		location.reload();  
	       }	 
      function  SetCookie(name,value){ 
	  var Days = 30; //此 cookie 将被保存 30 天
          var exp = new Date();    //new Date("December 31, 9998");
          exp.setTime(exp.getTime() + Days*24*60*60*1000);
          document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
       }
    function getCookie(name)//取cookies函数   
    {
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;
    }
    $(function() {
		var uulanguage = (navigator.language || navigator.browserLanguage).toLowerCase();
                if (uulanguage.indexOf("en") > -1) {
                    $("[data-localize]").localize("text", {pathPrefix: "lang", language: "en"});
               }else if (uulanguage.indexOf("zh") > -1) {
                 $("[data-localize]").localize("text", {pathPrefix: "lang", language: "zh"});
              }else{
              $("[data-localize]").localize("text", {pathPrefix: "lang", language: "en"});
              };        
         if (getCookie(name) != "") {
             if (getCookie(name) == "zh") {
                 $("[data-localize]").localize("text", {pathPrefix: "lang", language: "zh"}); 
            }
             if (getCookie(name) == "en") {
                 $("[data-localize]").localize("text", {pathPrefix: "lang", language: "en"});     
            }
        }
    });

设置好后再登录就会出现下面的中英文切换的效果