Sie sind auf Seite 1von 3

LanguageJS/README.

md

language-js
Suporte multi-idioma simple con JavaScript.

Como usarlo:

 Añadir el archivo JavaScript language.js:

<script src="language.js"></script>

Y tambien indicar que elementos tienen traduccion (ver Crear las


traducciones en este documento para saber mas):

var LanguageJS = new LanguageJS([


"title",
"description"
]);

 Crear archivos de traduccion. Crea una carpeta llamada /locale/.

Crear los archivos dentro de esa carpeta, el nombre de estos archivos debe ser:

bd-identificadorSeccion-identificadorIdioma.js.

identificadorSeccion: Un simple identificador para separar los archivos de


traducción segun la seccion que traduzcan.

identificadorIdioma: Identificador de idioma (Recomendado el standard ISO 639-


1).

Ejemplos:

Seccion Español (es) Ingles (e

index.html bd-index-es.js language-index-en.js


Seccion Español (es) Ingles (e

settings.html bd-settings-es.js language-settings-en.js

 Crear las traducciones:

Dentro de cada archivo antes creado, se deben crear las traducciones con esta
estructura:

var localization = {
identificador: "Texto de traudccion",
};

Por ejemplo:

var localization = {
titulo: "Mi pagina",
descripcion: "Esta es mi pagina web."
};

 Asignar identificadores a cada elemento HTML a traducir:

Para que se traduzca correctamente, debemos ir a nuestra HTML y añadir una


clase que relacione el objeto con el texto que nemos introducido en los archivo
de traduccion. Para que no existan confusiones sobre las clases, estas lleva un
prefijo (lang__) del que va acompañado el identificador:

<p class="lang__identificador">Texto</p>

Ejemplo:

<p class="lang__titulo">Mi pagina</p>

 Llamar a la funcion para traducir: Funcion en JavaScript:

LanguageJS.translate('identificadorIdioma', 'identificadorSeccion');

Por ejemplo:

LanguageJS.translate('es', 'index');

Este seria un ejemplo con varios idiomas:

<a href="#" onclick="LanguageJS.translate('es', 'index');">Español</a>


<a href="#" onclick="LanguageJS.translate('en', 'index');">Ingles</a>
<a href="#" onclick="LanguageJS.translate('it', 'index');">Italiano</a>
Language.JS

function LanguageJS(itemsToTranslate) {

this.addLanguageFile = function(){
var languageFile = document.getElementById('languageFile');
(languageFile != null) ?
languageFile.parentNode.removeChild(languageFile):"";
languageFile = document.createElement('script');
languageFile.src = "locale/bd-" + this.sectionID + "-" +
this.languageID + ".js";
languageFile.id = "languageFile";
document.getElementsByTagName('body')[0].appendChild(languageFile);
}

this.translate = function(languageID, sectionID) {


this.languageID = new String(languageID);
this.sectionID = new String(sectionID);
this.addLanguageFile();
var languageFile = document.getElementById('languageFile');
languageFile.onload = function(){
for (var i in itemsToTranslate) {
var elementToTranslate =
document.getElementsByClassName('lang__' + itemsToTranslate[i]);
for (var o in elementToTranslate) {
elementToTranslate[o].innerHTML =
localization[itemsToTranslate[i]];
}
}
}
}
}

Das könnte Ihnen auch gefallen