1. 程式人生 > >web系統多語言切換(中文,英文,日文)

web系統多語言切換(中文,英文,日文)

1,下載語言切換所需要的js  jquery.localize.js      http://webscripts.softpedia.com/script/Modules/jQuery-Plugins/jQuery-localizationTool-js-83407.html

2,在web.xml中新增程式碼,攔截json格式資料,配置檔案是json檔案

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

3,定義三個json檔案,text-zh.json,text-ja.json,text-en.json(中文需要轉義 防止可能出現亂碼)

(1)text-en.json

{
 "acc": {  
    "HelpCenter": "Help center",
    "BusinessCenter": "Business Center",
    "Exit": "[Exit]",
    "BusinessSupport": "Business Support"
  }
}
(2)text-zh.json
{
 "acc": {  
    "HelpCenter": "幫助中心",
    "BusinessCenter": "商家中心",
    "Exit": "[退出]",
    "BusinessSupport": "商家支援"
  }
}
(3)text-ja.json
{
 "acc": {  
    "HelpCenter": "ヘルプセンター",
    "BusinessCenter": "商家センター",
    "Exit": "[名目]",
    "BusinessSupport": "企業支援"
  }
}

4,語言切換  jsp頁面新增
<select id="ddlSomoveLanguage" onchange="chgLang();">  
        <option value="zh">選擇</option>
        <option value="zh">中文</option>  
        <option value="en">ENGLISH</option>  
        <option value="ja">日本語</option>
</select> 

5,在需要切換的地方引入對應的方法   data-localize="acc.HelpCenter"
<a data-localize="acc.HelpCenter" href="$!webPath/articlelist_help.htm">幫助中心</a>

6,寫一個language-coockies.js 檔案,$("[data-localize]").localize("text", {pathPrefix: ctx+"/resources/lang", language:"en"});pathPrefix表示json檔案路徑的字首,texten對應檔名text-en.json


var name = "somoveLanguage";
/*server*/
var ctx = window.document.location.href.substring(0,window.document.location.href.indexOf(window.document.location.pathname));
      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: ctx+"/resources/lang", language: "en"});  
               }else if (uulanguage.indexOf("zh") > -1) {  
                 $("[data-localize]").localize("text", {pathPrefix: ctx+"/resources/lang", language: "zh"});  
              }else if (uulanguage.indexOf("ja") > -1) {  
                 $("[data-localize]").localize("text", {pathPrefix: ctx+"/resources/lang", language: "ja"});  
              }else{  
              $("[data-localize]").localize("text", {pathPrefix: ctx+"/resources/lang", language: "zh"});  
              };          
         if (getCookie(name) != "") {  
             if (getCookie(name) == "zh") {  
                 $("[data-localize]").localize("text", {pathPrefix: ctx+"/resources/lang", language: "zh"});   
            }  
             if (getCookie(name) == "en") {  
                 $("[data-localize]").localize("text", {pathPrefix: ctx+"/resources/lang", language: "en"});       
            }
             if (getCookie(name) == "ja") {  
                 $("[data-localize]").localize("text", {pathPrefix: ctx+"/resources/lang", language: "ja"});       
            }
        }  
    });

7,