i18next的jquery插件jquery-i18next的使用方法

2017年3月22日

i18next的jquery插件jquery-i18next的使用方法

前提条件

使用jquery-i18next插件前，需要jquery和i18next的支持。

安装

jquery-i18next支持npm和bower安装

# npm package
$ npm install jquery-i18next

# bower
$ bower install jquery-i18next

使用入门

在html代码中插入data-i18n的属性

<ul class="nav">
  <li><a href="#" data-i18n="nav.home"></a></li>
  <li><a href="#" data-i18n="nav.page1"></a></li>
  <li><a href="#" data-i18n="nav.page2"></a></li>
</ul>

定义翻译文件

可在源码路径下创建locales/en/translation.json文件

{
  "nav": {
    "home": "Home",
    "page1": "Page One",
    "page2": "Page Two"
  }
}

通过Javascript代码进行初始化和翻译

// 其中i18nextInstance是i18next的实例，最后一个参数是配置项

jqueryI18next.init(i18nextInstance, $, {
  tName: 't', // --> appends $.t = i18next.t
  i18nName: 'i18n', // --> appends $.i18n = i18next
  handleName: 'localize', // --> appends $(selector).localize(opts);
  selectorAttr: 'data-i18n', // selector for translating elements
  targetAttr: 'i18n-target', // data-() attribute to grab target element to translate (if diffrent then itself)
  optionsAttr: 'i18n-options', // data-() attribute that contains options, will load/set if useOptionsAttr = true
  useOptionsAttr: false, // see optionsAttr
  parseDefaultValueFromContent: true // parses default values from content ele.val or ele.text
});

$(".nav").localize();

最终展现在网页中的结果

// <ul class="nav">
//  <li><a href="#" data-i18n="nav.home">Home</a></li>
//  <li><a href="#" data-i18n="nav.page1">Page One</a></li>
//  <li><a href="#" data-i18n="nav.page2">Page Two</a></li>
// </ul>

使用进阶

通过jQuery的选择器来实现不同的翻译

翻译一个元素

<a id="btn1" href="#" data-i18n="myKey"></a>
$("#btn1").localize(options);

翻译一个元素的子元素

<ul class="nav">
  <li><a href="#" data-i18n="nav.home"></a></li>
  <li><a href="#" data-i18n="nav.page1"></a></li>
  <li><a href="#" data-i18n="nav.page2"></a></li>
</ul>
$(".nav").localize();

翻译一些内部元素

<div class="outer" data-i18n="ns:key" data-i18n-target=".inner">
  <input class="inner" type="text"></input>
</div>
$(".outer").localize();

设置不同属性的翻译

比如，想要设置某个元素的title属性的多语言，可使用这种方式；或者其他提示信息等。

<a id="btn1" href="#" data-i18n="[title]key.for.title"></a>
$("#btn1").localize();

设置多个属性

和设置单个属性类似，不过通过分号进行分隔，添加多个属性。

<a id="btn1" href="#" data-i18n="[title]key.for.title;myNamespace:key.for.text"></a>
$("#btn1").localize();

设置内部html的属性

<a id="btn1" href="#" data-i18n="[html]key.for.title"></a>
$("#btn1").localize();

添加前置内容

给一个元素原有内容前插入一些翻译文字

<a id="btn1" href="#" data-i18n="[prepend]key.for.title">insert before me, please!</a>
$("#btn1").localize();

添加后置内容

给一个元素原有内容后追加一些翻译文字

<a id="btn1" href="#" data-i18n="[append]key.for.title">append after me, please!</a>
$("#btn1").localize();

设置数据

<a id="btn1" href="#" data-i18n="[data-someDataAttribute]key.for.content"></a>
$("#btn1").localize();

参考

jquery-i18next