i18next - Sample
A little sample to see i18next in action.
switching current language
by querystring:
basic translation
without or default namespace
loaded resource file (JSON):
{
"app": {
"name": "i18next"
}
}javascript code:
i18n.t("app.name");
with namespace
loaded resource file (namespace ns.common!):
{
"add": "add"
}javascript code:
i18n.t("ns.common:add");
interpolation
i18next way
loaded resource file (JSON):
{
"app": {
"insert": "you are __youAre__"
}
}javascript code:
i18n.t("app.insert", {youAre: "great"})
with sprintf
loaded resource file (JSON):
{
"app": {
"sprintf": "The first 4 letters of the english alphabet are: %s, %s, %s and %s"
}
}javascript code:
i18n.t("app.sprintf", { postProcess: "sprintf", sprintf: ["a", "b", "c", "d"] })
plurals
plurals
i18next supports all plural forms of the different languages (not only the simple ones).
loaded resource file (JSON):
{
"app": {
"child": "__count__ child",
"child_plural": "__count__ children"
}
}javascript code:
i18n.t("app.child", {count: 1}); // -> singular
i18n.t("app.child", {count: 3}); // -> plural
nesting
nesting of resource values
eg. to build up a glossary.
loaded resource file (JSON):
{
"app": {
"area": "Area 51",
"district": "District 9 is more fun than $t(app.area)"
}
}javascript code:
i18n.t("app.district");
context
context
eg. for gender specific translations
loaded resource file (JSON):
{
"app": {
"friend_context": "A friend",
"friend_context_male": "A boyfriend",
"friend_context_female": "A girlfriend"
}
}javascript code:
i18n.t("app.friend_context", {context: ""}); // -> A friend
i18n.t("app.friend_context", {context: "male"}); // -> A boyfriend
i18n.t("app.friend_context", {context: "female"}); // -> A girlfriend
usage with jquery fc
setting text of elements:
html snipplet:
<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 (JSON):
{
"nav": {
"home": "home",
"page1": "page one",
"page2": "page two"
}
}javascript code:
$(".nav").i18n();
html snipplet:
<button id="btn" data-i18n="ns.common:add"></button>loaded resource file (with namespace ns.common):
{
"add": "add"
}javascript code:
$("#btn").i18n();
setting other attributes of elements:
You can set multiple attributes by seperating them with ';'
Just add attributes name to set inside brackets in front of key:
html snipplet:
<div id="extendedAttr">
<input data-i18n="[placeholder]ns.common:attr.placeholder;" type="text"></input>
<button data-i18n="[title]ns.common:attr.title;btn.hoverMe;"></button>javascript code:
$("#extendedAttr").i18n();
You can pass in options for plural, context, ...$(".mySelector").i18n(options);
setting inner html:
Just add attributes name to set inside brackets in front of key:
html snipplet:
<div id="innerHtml" data-i18n="[html]html.content;">loaded resource file (with namespace ns.common):
{
"html": {
"content": [
"<p>row one</p>",
"<p>row two</p>",
"<p>row three</p>"
]
}
}javascript code:
$("#innerHtml").i18n();
