Plugin excelente para traduções client side com javascript!

Postado em qua 25 maio 2016 em Javascript

Recentemente estava com um trabalho em que devia fazer as traduções de uma página web.

E, após vasculhar e testar uma enorme quantidade de plugins jQuery, eis que encontro um que me ajudou com o meu trabalho.

translate.js

translate.js is a jQuery plugin to translate text in the client side.

Vou explicar como ele funciona:

Primeiramente baixe a biblioteca no site deles. -> translate.js download

Para este plugin funcionar você deve ter o jQuery na página em questão.

Para verificar o jQuery na página você pode abrir o console javascript do navegador e digitar

> $().jquery

Ele vai retornar a versão do jquery, caso contrário, vai retornar um erro.

O script do plugin deve vir após o jQuery. Segue o exemplo abaixo:

<script src="jquery.js"/>
<script src="jquery.translate.js"/>
<script src="meus_scripts.js"/>

Adicione o código 'trn' às classes e o data-key-trn='traduz-isso'

<span class="trn" data-trn-key='data-1'>Oi</span>
<span class="trn" data-trn-key='data-2'>Tchau</span>

E então monte um json com a tradução em uma variável, ou como achar melhor.

var dict = {
  "data-1": {
    pt: "Oi",
    en: "Hello"
  },
  "data-2": {
    pt: "Tchau",
    en: "Bye"
  }
}

Inicialize o plugin:

var tradutor = $('body').translate({lang: "pt", t: dict}); //vai iniciar em português.

Para carregar qualquer outra tradução que você tenha configurado basta usar isto.

tradutor.lang("pt"); //troca para o inglês.

O resto fica pela necessidade e criatividade. Eu achei a ferramenta realmente útil.

Javascript jQuery