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筛选不到这个。

遗留问题，切换语言包后，页面显示出现问题，不一样语言的显示长度不一样。目前还未解决