Uninstallme

La Web se ideó cuadrada.

Ejemplo de Javascript Multiidioma

1 de Septiembre 2009

Cuando tenemos un sitio en varios idiomas en el que estamos añadiendo atributos como ALT o TITLE a imágenes o enlaces, lo ideal es proporcionar esos literales en todos los idiomas del sitio y usar los correspondientes al idioma según el valor del atributo xml:lang o lang de la etiqueta HTML.

Para estos casos es útil crear un objeto en el que almacenamos todos los literales según el código del idioma.

Mediante una función que devuelva el valor del atributo xml:lang o lang del tag HTML, estableceremos el idioma del sitio y los literales a usar.

Ejemplo completo usando Mootools:

var MiClase = new Class({
  Implements: Options,
  // literales a usar
  options: {
    literales: {
      ES: {
        titleMostrar: 'Mostrar álbum',
        titleOcultar: 'Ocultar álbum'
      },
      EN: {
        titleMostrar: 'Show album',
        titleOcultar: 'Hide album'
      }
    }
  },
  initialize: function(element, options){
    this.setOptions(options);
    this.element = element;
    ...
    // llamamos a la función encargada de obtener el valor del atributo lang del tag HTML
    this.getDocumentLang();
    // según el valor de this.lang (devuelto por la función anterior) asociamos los literales de uno u otro idioma a una propiedad "literales" de nuestra clase "MiClase"
    this.lang == 'es' ? this.literales = this.options.literales.ES : this.literales = this.options.literales.EN;
  },
  getDocumentLang: function(){
    // obtengo el valor de xml:lang o de lang si xml:lang no se ha usado en el HTML
    this.lang = $$('html')[0].get('xml:lang') || $$('html')[0].get('lang');
    if(!this.lang) this.lang = 'es'; // idioma por defecto si no se ha declarado el idioma principal del documento
    return this.lang;
  },
  // uso de la propiedad literales en otras funciones
  funcionEjemplo: function(){
    var miElemento = ...;
    miElemento.set('title', this.literales.titleMostrar);
  }
});

En el caso de más de dos idiomas, en lugar del condicional usado dentro del método initialize en el ejemplo anterior, podríamos usar una estructura switch case.
Ejemplo:

initialize: function(element, options){
  ...
  this.getDocumentLang();
  switch(this.lang){
    case 'es':
      this.literales = this.options.literales.ES;
      break;
    case 'en':
      this.literales = this.options.literales.EN;
      break;
    case 'fr':
      this.literales = this.options.literales.FR;
      break;
    default:
      this.literales = this.options.literales.ES;
  }
}

Archivado en Javascript

1 Comentario

Un comentario a “Ejemplo de Javascript Multiidioma”

  1. #1

    shakaran, el Septiembre 2nd, 2009:

    Muy útil para scripts que utilicen Mootools.

    De una manera simple se puede hacer un buen uso también de la localización para todos los países.

Deja tu comentario

Campos obligatorios marcados con *