Доброго времени суток!
Хочу поделиться своей наработкой для перевода страниц сайта с помощью простейшего jQuery плагина и такой приятной новой плюшки html5, как data-* атрибуты.
Итак цель: возможность легко и быстро обеспечить поддержку нескольких языков для разрабатываемого веб приложения.
Теперь немного кода. Предположим у нас имеется вот такая вот нехитрая html разметка:
<h1 data-translate-key="HEADING-ONE">Heading 1</h1>
<p data-translate-key="SOME-TEXT">Some text in tag P</p>
<p data-translate-key="ANOTHER-TEXT">another text</p>
Как видно в листинге приведенном выше у нас есть несколько html элементов имеющих объявленный с помощью атрибута data-translate-key ключ для перевода, по которому мы будем получать сам текст из словаря. Также внутри тегов указан текст «по умолчанию».
Организация словаря у нас будет реализована средствами стандартных объектов JavaScript:
var dict = {
en: {
'SITE-TITLE': 'Site title',
'HEADING-ONE': 'Heading 1',
'SOME-TEXT': 'Some text in tag P',
'ANOTHER-TEXT': 'another text1'
},
ru: {
'SITE-TITLE': 'Заголовок сайта',
'HEADING-ONE': 'Заголовок первый',
'SOME-TEXT': 'Какой то текст в теге P',
'ANOTHER-TEXT': 'Другой текст'
}
};
Как видно в данном примере мы имеем два словаря. Для русского и английского языков.
Теперь самое главное. Собственно сам плагин. Он имеет всего несколько строк кода:
$.html5Translate = function(dict, lang){
$('[data-translate-key]').each(function(){
$(this).html( dict[ lang ][ $(this).data('translateKey') ] );
});
};
Здесь, как видно из приведенного листинга, мы получаем все элементы html страницы, имеющие атрибут data-translation-key и прокручиваем весь массив этих элементов с помощью колбэка each. Далее в каждой итерации, мы задаем текст для каждого элемента, в соответствии с тем, какой словарь выбран, а так же в соответствии со значением атрибута data-translation-key, для каждого конкретного элемента. Функция принимает в качестве аргументов всего две переменных: dict — содержит объект словаря и lang — содержит названия языка, который сейчас следует использовать.
Что бы применить плагин достаточно сделать следующее:
1. Подключить библиотеку jQuery.
2. Подключить сам плагин.
3. Разметить html документ, расставив для нужных элементов атрибуты data-translation-key.
4. Создать словарь (рекомендуется так же подключить его отдельным js файлом).
5. Вызвать функцию перевода, когда DOM документа будет готов и указать функции необходимые параметры:
$(document).ready(function(){
$.html5Translate(dict, 'en');
});
Тут, как видно, мы вызываем функцию перевода, указав ей что нужно использовать объект словаря dict и перевести текст все элементов на английский язык.
Спасибо за внимание.
Автор: ilmor
