[英]Asynchronous language selector using i18next
I am using http://jamuhl.github.com/i18next to localize a static website. 我使用http://jamuhl.github.com/i18next本地化静态网站。
My initialization script is: 我的初始化脚本是:
jQuery(function($) {
var setLng = $.url().param('setLng');
if (setLng)
{
language_complete = setLng.split("-");
}
else
{
language_complete = navigator.language.split("-");
}
language = (language_complete[0]);
console.log("I speak (root): %s", language);
i18n.init({ lng: language, debug: true }, function() {
// save to use translation function as resources are fetched
$(".tzm-i18n").i18n();
$(".page-i18n").i18n();
$(".menu-i18n").i18n();
$(".user-i18n").i18n();
$(".search-i18n").i18n();
$(".footer-i18n").i18n();
});
// language selector
var lngSld = false;
$('.lng_trigger').click(function() {
And here is the HTML: 这是HTML:
<div id="page" class="page-i18n">
<!--${languages} Bread crumbs -->
<p data-i18n="welcome.p1"></p>
<p data-i18n="welcome.p2"></p>
</div>
<li id="set-lang"><!-- Language selector -->
<select id="source">
<option selected="selected" value="br">Brasil</option>
<option value="fr">France</option>
<option value="de">Germany</option>
<option value="in">India</option>
<option value="jp">Japan</option>
<option value="rs">Serbia</option>
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
</select>
</li>
What is the correct way to set the language when <select>
option is clicked and just pull the values for <p data-i18n="welcome.p1"></p>
from the /locals/br/translations.json
file asynchronously without having to reload the entire page? 单击<select>
选项时设置语言的正确方法是什么,只需异步从/locals/br/translations.json
文件中提取<p data-i18n="welcome.p1"></p>
的/locals/br/translations.json
无需重新加载整个页面?
How would this then be persisted, if the user then navigates to other pages? 如果用户然后导航到其他页面,那将如何保持? I am using https://github.com/allmarkedup/jQuery-URL-Parser but don't see any functions to alter the uri so that the choice is appended to like http://domain.tld/br/
. 我正在使用https://github.com/allmarkedup/jQuery-URL-Parser,但没有看到任何改变uri的函数,因此选择附加到http://domain.tld/br/
。
I would put the translation functions in a separate function (ie translatePage()
) and call it the first time during init
and a second time when the click
event handler is fired. 我会将翻译函数放在一个单独的函数(即translatePage()
)中,并在init
期间第一次调用它,第二次调用click
事件处理程序。
Also, i18next comes with cookie storage (initialized with useCookie: true
); 此外,i18next附带cookie存储(使用useCookie: true
初始化useCookie: true
); you can use this to store your current language with $.i18n.setLng
and retrieve it with $.i18n.lng()
functions. 您可以使用它来使用$.i18n.setLng
存储当前语言,并使用$.i18n.lng()
函数检索它。 Then it's easy to redirect to each URI. 然后很容易重定向到每个URI。
I hope this helps. 我希望这有帮助。
What manudurand said is correct. manudurand说的是正确的。 Also, you don't need to reload the page, just set the language and translate the strings again like this: 此外,您不需要重新加载页面,只需设置语言并再次翻译字符串,如下所示:
i18n.setLng('en-EN', function() { $('[data-i18n]').i18n(); });
However, in your case instead of... 但是,在你的情况下,而不是......
$('[data-i18n]').i18n();
... it would be ... ... 这将是 ...
$(".tzm-i18n").i18n();
$(".page-i18n").i18n();
$(".menu-i18n").i18n();
$(".user-i18n").i18n();
$(".search-i18n").i18n();
$(".footer-i18n").i18n();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.