Source can be loaded via npm, bower or downloaded from this repo.
NEWS: localization as a service - locize.com
Needing a translation management? Want to edit your translations with an InContext Editor? Use the orginal provided to you by the maintainers of i18next!
With using locize you directly support the future of i18next and react-i18next.
If you don't use a module loader it will be added to window.jqueryI18next
# npm package
$ npm install jquery-i18next
# bower
$ bower install jquery-i18next
Simplifies i18next usage in projects built based on jquery, like:
page source:
<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>
loaded resource file (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 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
});
<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 must be a valid JSON object.
<a id="btn1" href="#" data-i18n="myKey"></a>
$("#btn1").localize(options);
myKey: same key as used in i18next (optionally with namespaces) options: same options as supported in 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();
<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();
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。