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

Anuncios

Acerca de Francisco Castán

Creador, Diseñador, Investigador y Programador de Software Lenguajes Preferidos: C/C++, C#, Java, PHP, Python, PERL, Shell, JavaScript

Publicado el 20/07/2017 en JavaScript, JQuery y etiquetado en , , . Guarda el enlace permanente. Deja un comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: