Jquery.i18n使用技巧（一）

最近第一次使用i18n插件，很好用，方法很簡單。我就不介紹什麼i18n的來歷了，本身百度。直接說使用方法：

 1.從官網獲取到jquery.i18n

　　https://code.google.com/p/jquery-i18n-properties/downloads/list 

2.配置目錄以下：

　　

　　引入i18n便可，這裏注意兩點：1.引入jquery庫必須在以前引入 2.默認狀態有一個path的properties，不加的話，會出現404錯誤

3.頁面加入選擇項select

1  <li><a><%= value %></a></li>
2                 <li style="padding:14px !important;">
3                     <select name='selectLang' id="changeLang">
4                         <option value='1'>中文</option>
5                         <option value='2'>英文</option>
6                     </select>
7                 </li>

4.獲取到value存入session（加載語言配置文件，頁面會重載，必須持久化保存數據）

5.

  app.post('/change-lang',function(req, res){
        var valueLang = req.body.valueLang;
        console.log(valueLang);
        var valueLang = req.body.valueLang;
        if(valueLang == 1 || valueLang == 2) {
            req.session.valueLanguage = valueLang;
            res.send({
                state:"0000",
                msg:"success"
            });
        }
        else {
            res.send({
                state: "0001",
                msg: "fail"
            });
        }
    });


 $('#changeLang').change(function () {
        var item = $('#changeLang').val();
        $.ajax(
            {
                type: 'post', // 提交方式 get/post
                url: '/change-lang', // 須要提交的 url
                data:{valueLang: item},
                success: function (data) {
                    window.location.href = '';
                }
            }
        );
        /*$.post('/change-lang', {valueLang: item}, function (data) {
            window.location.href = '';
        });*/
    });

 

上面是服務器代碼，下面是界面代碼

6.配置i18n

　　

 jQuery.i18n.properties({//加載瀏覽器選擇語言對應的資源文件
            name: page_name, // 需愛加載的資源文件名稱
            path: '../i18n/', //資源文件路徑
            mode: 'map', //用Map的方式使用資源文件中的key值
            language: 'zh',//語言類型zh或者en
            callback: function () {
                var arr = $("[id^=" + page_name + "]");
                for (var i = 0; i < arr.length; i++) {
                    var tempID = arr[i].id;
                    $('#' + tempID).html($.i18n.prop(tempID));
                }
            }
        });

至此大功告成。

另外有一點須要注意，由於頁面重載之後select會被刷新，與這時候雙語就不能觸發change事件；

解決方法：

 1 document.getElementById("changeLang").value = valueLang; 

每一個頁面配置這句話，進行修改，不知道什麼緣由，使用jquery篩選不到這個。

遺留問題，切換語言包後，頁面顯示出現問題，不一樣語言的顯示長度不一樣。目前還未解決