Explicação
Para fazer com que o código execute e realize a internacionalização é necessário invocar a função $.i18n()
nos elementos desejados. Para utilizar de forma genérica (em todos os elementos com o atributo data-i18n), utilize o seletor [data-i18n]'i18n]
.
$.i18n().load({
br: {
'welcome': 'ola mundo'
},
en: {
'welcome': 'hello world'
},
es: {
'welcome': 'hola mundo'
}
});
function changeLocale(locale) {
$.i18n({
locale: locale
});
$('[data-i18n]').i18n();
}
$(function() {
$('button').on('click', function() {
var locale = $(this).data('locale');
changeLocale(locale);
});
});
changeLocale('en'); // locale default da página
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.js"></script>
<script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.messagestore.js"></script>
</head>
<body>
<button type="button" data-locale="br">br</button>
<button type="button" data-locale="en">en</button>
<button type="button" data-locale="es">es</button>
<h1 data-i18n="welcome">ola mundo (fallback)</h1>
<script type="text/javascript">
$.i18n().load({
br: {
'welcome': 'ola mundo'
},
en: {
'welcome': 'hello world'
},
es: {
'welcome': 'hola mundo'
}
});
function changeLocale(locale) {
$.i18n({
locale: locale
});
$('[data-i18n]').i18n();
}
$(function() {
$('button').on('click', function() {
var locale = $(this).data('locale');
changeLocale(locale);
});
});
changeLocale('en'); // locale default da página
</script>
</body>
</html>