• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

jQ jquery-i18n-properties 多语言切换 国际化

一直想搞个多语言切换的东西,想的头发都没了。

终于让我看到了一个插件,虽然已经是很久以前的东西了,但是我测试了下,还真鸡儿好用。

github地址: 官网

引入文件,因为是jq的插件,所以在jq文件后面引入:

<script src="https://cdn.jsdelivr.net/gh/jquery-i18n-properties/jquery-i18n-properties/jquery.i18n.properties.min.js"></script>

引入后可以通过jQuery对象调用。

我们先讲一下大概过程再来说调用方法:

首先我们要有语言文件,也就是.properties的文件格式,它你可以理解为就是个对象就行了,但是不用引号包裹string就是了。

我们在项目里面,新建一个用于存储语言文件的文件夹,一般取名为language,和css啊,js,images这些文件夹都是兄弟,当然这个存放的路径你自己可以自由调整,只要待会能被js调用到。

我这里就创建了两个语言文件,一个en英文,一个zh中文,后缀都是.properties

文件的内容格式如下:

en

title = Test title

zh

title = 测试标题

语言文件里面要包含所有你要进行语言切换的内容,比如你有是个元素要进行语言国际化,那么针对这是个元素,你要都设置一个唯一的key值,然后key值要对应翻译过来的语言。

我这里title为key,后面的内容为不同语言的翻译内容。

然后针对对应的元素设置一个data属性

如:

<strong data-lang="title">标题</strong>

data-lang属性表示要进行国际化语言的元素,后面的值对应语言文件里面的key

然后我们就可以动手了

jQuery.i18n.properties({//加载资浏览器语言对应的资源文件
      name: lang, //资源文件名称
      path: 'language/', //资源文件路径
      language: lang,
      cache: false,
      mode: 'map', //用Map的方式使用资源文件中的值
      callback: function () {//加载成功后设置显示内容
        
      }
    });

其中name属性为你要加载的文件的名字,注意不要带.properties后缀,因为后缀插件会自动加的.

language这个属性一般也就是语言的简写,英文就为en,所以可以和name属性值相同

path为js要加载的语言文件的路径,因为我是根目录下,所以直接就language/

虽然我的js文件在js/js.js目录下,但是因为是index.html调用,所以路径是从根目录开始。

callback为回调函数,因为插件是ajax加载语言文件,所以本地测试是不行的哦,你需要模拟服务器环境,然后利用回调函数,我们一个个的进行文本替换。

实际代码:

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

        }
    }
});

这个函数我们可以自己手动触发,为此,在浏览器首次加载的时候,我们也可以通过判断浏览器的默认语言来进行自动更换语言。

获取浏览器语言

function getDefaultLang() {
    var lang = navigator.language || navigator.userLanguage; //常规浏览器语言和IE浏览器
    lang = lang.substr(0, 2); //截取lang前2位字符
    return lang;
}

剩下的就是用户手动切换了,我们可以使用select元素,然后监听它的change事件,或者其他元素的click事件,只要获取到语言文件名我们再进行ajax获取,再替换就行了。

搞了这么久,这个小心愿总算是完成了。

不过这插件用处也不是很广,一般用于固定内容会多一些,你像博客这些,就有点难了,因为很多东西他都是遍历出来的,没有固定的预设值

0
  • 本文分类:锋利的JQuery
  • 本文标签:多语言切换jquery-i18n-properties国际化
  • 流行热度:已超过 246 人围观了本文
  • 最后更新:2020年05月9日 - 3时54分10秒
  • 发布日期:2020年05月9日 - 3时54分10秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码