Documentation:
There is a nice tutorial in this blog post. Check it out!
Using with JQuery
There is no hard dependency on JQuery. If not used i18next will use drop in functions for ajax,...
But if JQuery is loaded before i18next it can be optionally extended:
By default i18next will extend jquery by appending i18n to $ and providing a $.fn to translate dom elements marked with the data-i18n attribute.
// with options
$.i18n.init({ lng: "en-US" });
// "later"
var x = $.t("key");JQuery deferred instead of callback
Use deferred:
i18n.init(opts).done(function() {
var x = $.t("key");
})Using the selector function
Usage:
$(mySelector).i18n(options);Hint: You can deactivate this features by setting options on init:
- setJqueryExt = false
- (will deactivate $.t too!)
Replace text of one element:
<a id="btn1" href="#" data-i18n="key.to.set.text"></a>
$("#btn1").i18n();The button will get it's text attribute set depending on it's key.
Like in the translation function '$.t(key)' you can prepand namespace with 'myNamespace:'
You could change the dataAttributes name to something else if needed, just set 'selectorAttr' on init (default is 'data-i18n').
i18next will grab a missing value from content and post it if postMissing feature is activated. You can turn this off by setting option ''defaultValueFromContent' to false on init.
empty data-i18n attribute:
the key will be taken from the elements text or value, eg: <a id="btn1" href="#" data-i18n>key.to.set.text</a>
Using Options:
You can pass in same options as in the translation function. For more information about the options go to the features page.
Alternatively, by setting init option or translation option `{useDataAttrOptions: true}` the Options for translation will be read and cached in the element's jQuery data under the "i18n-options" key. The next time `.i18n()` is called on the element, the previous options will be used. This makes it possible to retranslate the element without supplying the original arguments.
Replace on elements children:
<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").i18n();Every li element will get it's text attribute set depending on it's key.
Replace on inner element:
<div class="outer" data-i18n="ns:key" data-i18n-target=".inner">
<input class="inner" type="text"></input>
</div>
$(".outer").i18n();As the target attribute is set the input tag with class 'inner' will get his value set.
setting html, prepend, append content:
Replace other attributes or innerHtml:
<a id="btn1" href="#" data-i18n="[title]key.for.title;key.for.text"></a>
$("#btn1").i18n();Just provide the attribute to set in '[]' and seperate multiple attributes via ';'.
You can even set the innerHtml by prepending '[html]' or prepend by '[prepend]' or append by '[append]'.
setting data:
set data:
<a id="btn1" href="#" data-i18n="[data-someDataAttribute]key.for.text"></a>
$("#btn1").i18n();The element will have 'data-someDataAttribute' attribute and data could be read by $("#btn1").data('someDataAttribute');