Sistem multi-language folosind jQuery

functii javascript, invata Javascript, invata jQuery, javascript, jQuery, multi-language

Va explicam acum cateva luni de zile cum se poate face un site multi-language in Flash. Acum va voi prezenta aceeasi metoda dar folosindu-ne de Javascript si jQuery.

Sa definim in primul rand vectorul care va contine limbile noastre. Pentru acest exemplu am ales romana, engleza si franceza.

var langs = new Array("ro", "en", "fr");

Acum sa adaugam cateva cuvinte simple.

langs[0] = new Array('salut', 'noapte buna', 'pofta buna');
langs[1] = new Array('hello', 'good night', 'good appetite');
langs[2] = new Array('bonjour', 'bonne nuit', 'bon appétit');

Dupa cum vedeti, ne folosim tot de o matrice, ca si in Flash. Fiecare limba (element din vector) a devenit la randul sau un alt vector care contine cuvintele traduse.

Avem nevoie si de o variabila care sa tina minte limba curenta. Vom seta romana ca limba de baza (pozitia 0 in vector).

defaultLang = 0;

Sa consideram un tabel simplu in care sa afisam cele 3 valori.

<table border=1>
<tr>
   <td style="width: 100px" id="el1"></td>
   <td style="width: 100px" id="el2"></td>
   <td style="width: 100px" id="el3"></td>
</tr>
</table>

Ok. Acum avem 3 casute, fiecare avand un alt id. Sa scriem o functie care sa schimbe continutul acestor casute in functie de variabila defaultLang.

function changeLangFunction() {
	$('#el1').html(langs[defaultLang][0]);
	$('#el2').html(langs[defaultLang][1]);
	$('#el3').html(langs[defaultLang][2]);
}

La fiecare apelare a functiei, cele 3 elemente vor primi valorile corespunzatoare din matricea limbilor.

Sa adaugam si 3 butoane cu ajutorul carora sa apelam aceasta functie. Definim aceeasi clasa pentru toate 3, dar atributul rel va trebui sa fie acelasi cu pozitia limbii in vectorul langs.

<input type="button" class="changeLang" rel="0" value="Limba romana" />
<input type="button" class="changeLang" rel="1" value="Limba engleza" />
<input type="button" class="changeLang" rel="2" value="Limba franceza" />

Si ultima parte: apelarea practica a functiei. Vom apela functia prima data pentru aplicarea limbii de baza (romana), iar apoi, la fiecare click pe cele 3 butoane, vom schimba limba de baza cu valoarea atributului rel.

jQuery(document).ready(function () {
	changeLangFunction();
	$('.changeLang').click(function () {
		defaultLang = $(this).attr('rel');
		changeLangFunction();
	});
});

Sa vedem si cum arata mica noastra aplicatie.

Puteti descarca si exemplul din acest articol.

Nume: jQuery Multi-Language (593B) Descriere: Sistem multi-language folosind jQuery Descarcari: 1 Puncte de activitate necesare: 100 puncte Punctele tale: Nu ai suficiente puncte de activitate (mai multe detalii)

Ti-a placut articolul Sistem multi-language folosind jQuery?

Ai nevoie de rezolvarea unei probleme la informatica?

Iti recomandam si urmatoarele articole:

• Multi-Language Flash Website
• Zi si noapte folosind JavaScript si jQuery
• Tastatura virtuala folosind jQuery
• Casute animate folosind jQuery
• jQuery tooltip cu imagini