Динамический перевод страницы — способ 2

28 Фев
2012

Данный топик описывает решение проблемы перевода страницы без перезагрузки страницы более простым, но менее гибким способом, нежели Динамический перевод страницы на другой язык от пользователя pashak. Предназначен для тех, кому нужно более простое и менее громоздкое решение этой задачи.

Суть


Данный способ основан на методе load, библиотеки jQuery, который вставляет асинхронно загруженный контент в выбранный элемент на странице. Фишкой является то, что при запросе контента вы можете указать CSS селектор элемента, содержимое которого будет вставлено (см. «Частичная вставка данных» тут).

Как это работает

Для начала напишем простенькую функцию, которая будет осуществлять «перевод» (подмену).
var language = 'ru'; // текущий язык
function pageLoad(page){ // page – адрес страницы
	$(‘#content’).load(page+' .'+language);
}

Теперь создаем файлы содержащие необходимый контент по шаблону:
<div class="ru">
	Русский текст
</div>
<div class="en">
	Английский текст
</div>
…

В принципе, это все, что нужно для работы способа.

Вам остается только менять значение переменной language и еще раз вызывать функцию pageLoad. При этом ссылку на страницу можно хранить где-то в глобальной области видимости.

При отсутствующем переводе вы можете пометить один и тот же блок несколькими языками.

Минус данного способа заключается в том, что он «переводит» только отдельно взятый блок на странице. Но в моем случае, переводить несколько блоков не было необходимым. Было только меню, которое так же как и контент полностью заменялись подготовленным заранее кодом, вшитым в функцию меняющую язык.
Рабочий пример http://sofiasymphony.com/ (не сочтите за пи ар)
По материалам Хабрахабр.



загрузка...

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

Наверх