JQuery плагин для перевода страниц с помощью html5 data-* тегов

Хочу поделиться своей наработкой для перевода страниц сайта с помощью простейшего 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 и перевести текст все элементов на английский язык.

Спасибо за внимание.