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

в 16:21, , рубрики: html5, javascript, jquery, jquery plugins, translation, Веб-разработка, метки: , , ,

Доброго времени суток!

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

Источник


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js