Manejo de Idiomas en Web con jquery.i18n.properties-1.0.9.js

Ahhh, los idiomas, un gracioso dolor de cabeza, después de tomar un desarrollo en el cual hacia todo por controllers, una mezcla de miedo, pero esta no es la razón del post, veremos una librería que medio algo de tranquilidad en la tempestad de esta travesía…

jquery.i18n.properties es una librería la cual permite el manejo de idioma con javascript y jquery si quieren ver el proyecto original pueden descargarlo de esta aquí.

En cuanto a mi, bueno como ya saben me gusta controlar algo las cosas que uso, así que me metí a echarle un ojo e hice un par de cambios y debo decir que no muy substanciales, manos a la obra, primero haremos un html con el siguiente código

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://fcgexamples.000webhostapp.com/i18n/jquery.i18n.custom.js"></script>
<input type="button" id="btEsp" value="Español">
<input type="button" id="btIng" value="English">
<fieldset>
<legend lang="app.test.legend.title"></legend>
<label lang="app.test.input.text.User.label"></label>:<input name="username" lang="app.test.input.text.User.placeholder" ><br>
<label lang="app.test.input.text.Password.label"></label>:<input name="password" lang="app.test.input.text.Password.placeholder"><br>
<input type="button" value="" lang="app.test.input.Button.label"><br>
<span lang="app.test.Description.Text1"></span>
</fieldset>
<script>
 var lang = 'es';
 
 $('#btEsp').on('click', function() {
 lang = 'es';
 regionalData();
 });
 
 $('#btIng').on('click', function() {
 lang = 'en';
 regionalData();
 });
 
 $(document).ready(function() {
 regionalData();
 });
 
 function regionalData() {
 $.i18n.properties({
 name: 'messages',
 path: '/i18n/lng/',
 mode: 'both',
 language: lang,
 });
 }
 
</script>

Como podemos ver tenemos un atributo «lang» que nos servirá para definir las etiquetas que manejaran el idioma un ejemplo de esto es lang=»app.test.input.Button.label» a partir de esto usamos parte de la librería i18n, a la cual le he realizado algunos cambios, uno de ellos es que cambie el idioma de manera automática podemos ver el ejemplo funcionado aquí.

Los archivos archivos de idioma se encuentran en la carpeta lng y cuentan con la siguiente nomenclatura messages_{idioma}.txt en el caso de ingles sería messages_en.txt en el caso de español sería messages_es.txt

La información interna de los archivos contiene lo siguiente para messages_es.txt

app.test.input.text.User.placeholder=Usuario
app.test.input.text.User.label=Usuario
app.test.input.text.Password.placeholder=Contraseña
app.test.input.text.Password.label=Contraseña
app.test.input.Button.label=Enviar
app.test.legend.title=Iniciar session
app.test.Description.Text1=Este es un ejemplo de Formulario

La información interna de los archivos contiene lo siguiente para messages_en.txt

app.test.input.text.User.placeholder=User
app.test.input.text.User.label=User Name
app.test.input.text.Password.placeholder=Password
app.test.input.text.Password.label=Password
app.test.input.Button.label=Send
app.test.legend.title=Login
app.test.Description.Text1=This is a From Example

Descarga