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