воскресенье, июня 14, 2009

Динамическая замена содержимого с помощью jQuery

При написании некоей веб-формы потребовалось предусмотреть двуязычность (как минимум в названиях пунктов). Легко сделать через PHP, но захотелось сделать на Яваскрипте, чтобы язык страницы переключался моментально и гладко.

Оказалось, что с помощью jQuery это буквально пара строк (не считая словарей).

1) Пишем словари подлежащих переводу терминов:

var ru=new Array('пункт 1', 'пункт 2', ...);
var en=new Array('item 1', 'item 2', ...);

2) Все элементы, подлежащие переводу, прописываются отдельным классом (я назвал его 'i18n'). Удобно, что этим классом можно пометить всё, что угодно, вплоть до отдельных слов.

3) Собственно, само переключение языка. Я не осилил jQuery.map и сделал перебором массива.

function translate(lang) {
var i=0;
$(".i18n").each(function() {
if (lang[i]) {
$(this).html(lang[i]);
}
++i;
});
}

Важно, чтобы каждому элементу разметки класса i18n соответствовали правильные пункты (по счёту) в словарях ru и en: для подстановки используются индексы.

4) активаторы переключения языков вызывают translate(ru) и translate(en).

5) Всё.

Комментариев нет:

Поиск по этому блогу