Шаг 1
Для начала предположим, что у нас есть следующий HTML:
<div>Hello there, how are you?</div>
Этот слой DIV содержит наш заголовок. Теперь мы решили, что мы хотим, чтобы этот заголовок был доступен на нескольких языках. Нашим первым шагом является добавление класса в div, чтобы мы могли определить его позже:
<div class="title">Hello there, how are you?</div>
<ч />
Шаг 2
Когда все будет готово, мы всего в двух шагах. Прежде всего, мы собираемся создать файл XML, который включает наши переводы. В этом XML-файле мы можем хранить переводы для нескольких фраз, и мы можем легко добавить больше языков на более позднем этапе. Мы сохраним этот файл как languages.xml и сохраним его в той же папке, что и наш HTML-файл.
<?xml version="1.0" encoding="UTF-8"?>
<translations>
<translation id="title">
<english>Hello there, how are you?</english>
<italian>Ciao, come stai?</italian>
</translation>
</translations>
Вы будете хранить все фразы, которые хотите перевести, между тегами <translations></translations>. Вы будете хранить каждую фразу в теге <translation></translation>. Чтобы определить, какая фраза переводится, нам нужно добавить id=”title”. Имя должно совпадать с именем класса CSS, назначенного вами в HTML. Наконец, мы можем поместить переводы внутри и окружить их тегами, определяющими язык. Например, нам нужно поместить текст на итальянском языке между тегами <italian></italian>. Имейте в виду, что вы можете легко изменить названия этих тегов - например, вы можете использовать <eng></eng> и <ita></ita> вместо.
<ч />
Шаг 3
После этого вам просто нужно добавить jQuery , чтобы прочитать файл XML и заменить содержимое ваших DIV в зависимости от выбранного языка. Вот, пожалуйста:
<script src="path/to/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
var language = 'italian';
$.ajax({
url: 'language.xml',
success: function(xml) {
$(xml).find('translation').each(function(){
var id = $(this).attr('id');
var text = $(this).find(language).text();
$("." + id).html(text);
});
}
});
});
</script>
Вот и весь необходимый код - на этот раз еще раз посмотрите на него с комментариями:
// Include jQuery script
<script src="path/to/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
// $(function() { should be used
// each time you use jQuery
$(function() {
// Here we set the language
// we want to display:
var language = 'italian';
// In order to get the translations,
// we must use Ajax to load the XML
// file and replace the contents
// of the DIVs that need translating
$.ajax({
// Here, we specify the file that
// contains our translations
url: 'language.xml',
// The following code is run when
// the file is successfully read
success: function(xml) {
// jQuery will find all <translation>
// tags and loop through each of them
$(xml).find('translation').each(function(){
// We fetch the id we set in the XML
// file and set a var 'id'
var id = $(this).attr('id');
// This is the most important step.
// Based on the language we can set,
// jQuery will search for a matching
// tag and return the text inside it
var text = $(this).find(language).text();
// Last, but not least, we set the
// contents of the DIV with a
// class name matching the id in the
// XML file to the text we just
// fetched
$("." + id).html(text);
});
}
});
});
</script>
И это все! Обновите страницу, и итальянская версия должна загрузиться, заменив английскую по умолчанию. В приведенном выше примере мы установили язык вручную:
var language = 'italian';
Мы могли бы так же легко установить это через PHP:
var language = '<?php echo $sLanguage; ?>';
Или, прочитав его по URL - вы можете использовать этот плагин jQuery , чтобы сделать это.
<ч />
Бонусный трюк
Если вы добавите больше языков, вы поймете, что фразы на одних языках длиннее, а на других короче. Мы могли бы хотеть иметь собственный CSS для каждого языка. Если взять приведенный выше пример, у нас изначально будет следующее:
div.title { font-size:30px; }
Что если бы мы хотели, чтобы у итальянца был шрифт меньшего размера? Легко! Нам нужно сделать небольшое изменение в нашем jQuery:
$(function() {
var language = 'italian';
$.ajax({
url: 'language.xml',
success: function(xml) {
$(xml).find('translation').each(function(){
var id = $(this).attr('id');
var text = $(this).find(language).text();
$("." + id).html(text);
// Here's the new line we're adding.
// We are assigned the DIV a new class
// which includes the old class name
// plus a "_language" - In this case,
// loading Italian would assign the DIV
// a "title_italian" class
$("." + id).addClass(id + '_' + language);
});
}
});
});
Теперь, когда мы добавили эту строку, мы можем просто добавить следующий CSS:
div.title { font-size:30px; }
div.title_italian { font-size:20px; }
Ваш итальянский текст теперь должен быть меньше. Примечание: Чтобы это работало, вы должны поместить определения языка нового языка в CSS под определения по умолчанию. Переключение этих двух строк не будет работать.