插件 jQuery.i18next 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.i18next 中文API文档 https://github.com/i18next/jquery-i18next

源码可以通过 npm, bower 或者 从GitHub下载.

如果您不使用模块加载器,它将被添加到window.jqueryI18next

# npm package
$ npm install jquery-i18next

# bower
$ bower install jquery-i18next

简化了基于jquery构建的项目中的i18next使用情况,例如:

页面来源:

<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 code:

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

// results in
// <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>

初始化插件

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 different than 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
});

在翻译功能中使用选项

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

or

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

data-i18n-options attribute必须是有效的JSON对象。

选择器功能的用法

翻译元素

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

myKey:与i18next中使用的密钥相同(可选择使用名称空间)选项:与i18next.t中支持的选项相同

翻译元素的子元素

<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();

设置不同的属性

<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();

设置innerHtml属性

<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();

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>