zoukankan      html  css  js  c++  java
  • jquery-i18n 多语言切换

    参考博客:https://www.jianshu.com/p/8b4c63e1cf25

    准备

    1.下载jquery和jquery-i18n-properties

    i18n地址:https://github.com/jquery-i18n-properties

    代码

    参考博客:https://www.jianshu.com/p/8b4c63e1cf25

    js代码(核心部分)

    注意

    1.查找路径是,path + name + '_' +language + '.properties',所以这三个参数很重要。也是通过,language参数的变化,进行多语言切换的。

    2.自定义的元素属性是data-lang='配置的key值',当然这个元素属性可以自己定义,例如lang-detail等等

      jQuery.i18n.properties({//加载资浏览器语言对应的资源文件
            name: 'lang', //资源文件名称
            path:'./lang/', //资源文件路径
            language: tmp_lang,
            cache: false,
            mode:'map', //用Map的方式使用资源文件中的值
            callback: function() {//加载成功后设置显示内容
              for(var i in $.i18n.map){// 
                $('[data-lang="'+i+'"]').text($.i18n.map[i]);
              }
              // document.title = $.i18n.map['title'];
            }
          });
    
    

    html部分

    1.引入i18n的js;

    2.配置data-lang(自定义)的多语言切换key值

    <h2 class="title" data-lang="grantAttributionManagement">授予归属管理</h2>
    
    

    配置文件properties

    1.地址,上面已经说了

    2.名称上面也已经提及,按照格式就行

    # lang_zh.properties
    switch=切换成繁体
    incentivePlanManagement=激励计划管理
    incentivePlanDetail=高度定制化的计划管理,多维度报表
    

    存在问题

    问题描述:加载properties文件出现跨域的问题;

    问题原因:

    因为是本地打开静态html文件,file的请求方式,所以出现这种问题

    问题解决

    1.通过浏览器设置跨域参数
    
    2.使用VSCODE软件的liver Serve 打开
    
    
  • 相关阅读:
    7月18日实习日志
    第二周总结
    7月15日实习日志
    7月14日实习日志
    7月13日实习日志
    7月12日实习日志
    7月11日实习日志
    第一周总结
    7月8日实习日志
    小飞机工作笔记(一)方案简述
  • 原文地址:https://www.cnblogs.com/perferect/p/13361150.html
Copyright © 2011-2022 走看看