美文网首页
基于jQuery 之前端国际化 i18n

基于jQuery 之前端国际化 i18n

作者: 乱来丶Fack | 来源:发表于2018-06-26 15:43 被阅读156次

    HTML代码

    <body>
    <select id="language1">
    <option value="zh" selected>中文</option>
    <option value="en">English</option>
    </select>
    <div id="en" data-locale="woshia">我是我是啊</div>

    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.i18n.properties.js"></script>
    <script src="js/language.js"></script>
    </body>

    js代码

    $(function () {
    var jsonData = {'lg': ''};
    var str = jsonData.lg;
    var hh = localStorage.getItem('key');

    //localStorage 没有key什么都不干
    if (!hh) {
        return;
    } else {
        //改变复选框的值,,,不是option
        $('#language1').val(hh);
        change()
    }
    

    });
    // 复选框改变事件
    $('#language1').change(function () {
    //封装的放法,每当chang这个select下拉选项时候都会调用 chang方法 把选中的 val 存到localStorage
    change()
    });
    //change 封装成一个方法
    function change() {
    NaLanguage = $('#language1').val(); //获取选中的语言 zh en

    // 把获取选中的 val 赋值给str
    str = NaLanguage;
    //tsr 存到 localStorage
    localStorage.setItem('key', str);
    
    
    $.i18n.properties({
        name: 'strings',  //配置文件名部分
        path: 'i18n/',    //排位置文件坐在文件位置
        mode: 'map',
        language: NaLanguage,  //对应选择的配置文件
        callback: function () {
            $('[data-locale]').each(function () {
                $(this).html($.i18n.prop($(this).data('locale')));
            });
        }
    });
    

    }

    相关文章

      网友评论

          本文标题:基于jQuery 之前端国际化 i18n

          本文链接:https://www.haomeiwen.com/subject/oklmyftx.html