Локализация с помощью JQuery?

Question

Я понятия не имею, как обрабатывать локализацию с помощью JQuery. Я хочу установить innerHTML с немецким текстом, но если браузер настроен на использование английского языка, то я хочу установить английский текст.

В PHP я использую gettext для таких вещей, но как это сделать в JavaScript / jQuery?

Answer 1

Нет простого решения для этого. Вероятно, я бы создал несколько сценариев с текстами для каждого языка и включил один из них в PHP. Так что, если кто-то использует английскую версию вашего сайта, вы бы включили только файл на английском языке, если кто-то использует немецкую версию, вы бы включили файл на немецком языке и т. Д.

Пример:

// your script logic
myscript.js

// language texts
myscript.en.js
myscript.de.js
myscript.it.js
...

Вы можете определить все языковые файлы следующим образом:

LANG = {
    txt1: 'English text1',
    txt2: 'English text2'
    ...
};

Убедитесь, что вы включили только один из них в ваш HTML, и сначала убедитесь, что вы включили языковой файл, т.е.

<script type="text/javascript" src="myscript.de.js"></script>
<script type="text/javascript" src="myscript.js"></script>

Затем вы можете использовать эти локализованные тексты в вашем основном скрипте, например:

$(document).ready(function () {
    alert(LANG.txt1);
});

Что лучше всего, так это то, что вашей логике (myscript.js в этом примере) не нужно беспокоиться о локализации, и вам не придется ее менять, если вы хотите добавить новый языковой файл.

Answer 2

Я еще не использовал его, но думаю об использовании jquery-localize для проекта. Если вы не возражаете основывать перевод на атрибутах rel, определенных в ваших элементах, тогда это выглядит как хороший вариант.

Пример из README:

HTML

<p rel="localize[title]">Tracker Pro XT Deluxe</p>
<p rel="localize[search.placeholder]">Search...</p>
<p rel="localize[search.button]">Go!</p>
<p rel="localize[footer.disclaimer]">Use at your own risk.</p>
<p rel="localize[menu.dashboard]">Dashboard</p>
<p rel="localize[menu.list]">Bug List</p>
<p rel="localize[menu.logout]">Logout</p>

приложения es.json

{
  title: "Tracker Pro XT Deluxo",
  search: {
     placeholder: "Searcho...",
     button: "Vamos!"
  },
  footer: {
    disclaimer: "Bewaro."
  },
  menu: {
    dashboard: "Dashboardo",
    list: "Bug Listo",
    logout: "Exito"
  }
}

Локализуй это!

$("rel*=localize").localize("application", { language: "es" })

Answer 3

Вам вообще не нужен JQuery.

Объект навигатора в javascript (http://www.comptechdoc.org/independent/web/cgi/javamanual/javanavigator.html)) содержит свойство userLanguage (IE) и language (Netscape / Firefox), которое устанавливается текущей локалью браузера.

Для решения вашего примера вы можете использовать что-то вроде:

   
  var textToSet = null;
  var userLang = null;

  /*
  -if userLanguage exists they're in IE, else firefox
  -get the first two letters in lowercase to guarantee 
   an easily evaluated base language
  */
  if(navigator.userLanguage) baseLang = substring(navigator.userLanguage,0,2).toLowerCase();
  else baseLang = substring(navigator.language,0,2).toLowerCase();

  //check languages
  switch(baseLang)
  {
    case "de":
      //German
      textToSet = "german text";
      break;
    default:
      textToSet = "english text";
  }
  document.getElementById('elementToSetTextInto').innerHTML = textToSet;

Имейте в виду, что вам может потребоваться другой текст, основанный на базовом языке и локали ... в этом случае ищите "en-us", "de-de". Сайты для кодов культур легко найти (1 ссылка только в первом посте;))

Надеюсь, у тебя получится.

Answer 4

Поскольку вы уже используете gettext с вашим php-приложением, вы должны изучить использование этой реализации JavaScript для gettext

Он не использует скомпилированные файлы .mo, но он будет использовать ваши файлы .po, которые у вас уже есть.

Этот метод имеет преимущество управления всеми вашими переводами в одном месте.

Answer 5

Другой вариант, на который вы можете обратить внимание, - это предложенный Microsoft jquery-global плагин .Это все еще в бета-версии.

Answer 6

Дайте это попробовать. TranslateThis Button - это облегченный виджет перевода Javascript. Он быстро переводит любую страницу, используя AJAX и Google Language API.

Здесь ...