Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Настраиваемый плагин локализации страниц jQuery - Internationalisation

Дата добавления: 29.01.2019 - 23:39
Добавил: Buger
Количество просмотров: 55
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
Настраиваемый плагин локализации страниц jQuery - Internationalisation
рейтинг 0.0
/
голосов 0
Internationalisation - это настраиваемый jQuery плагин для локализации и глобализации веб-страниц, который упрощает перевод любых строк в вашем документе на стороне клиента.

Установка NPM:


Код
# NPM
$ npm install internationalisation


Как это использовать:


1. Установите и импортируйте интернационализацию в свой проект.
Код
$ npm install internationalisation --save


2. Или добавьте скомпилированную версию на веб-страницу следующим образом:
Код
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="index.compiled.js"></script>


3. Добавьте альтернативную версию вашего текста следующим образом:
Код
<h1>
  Hello World!
  <!--deDE:Hallo Welt!-->
  <!--frFR:Bonjour le monde!-->
</h1>


4. Создайте ссылки для переключения между языками.
Код
<a href="#language-deDE">de</a>
<a href="#language-enUS">en</a>
<a href="#language-frFR">fr</a>


5. Инициализируйте плагин с параметрами по умолчанию.
Код
$(($) => $.Language())


6. Параметры конфигурации по умолчанию.
Код
$(($) => $.Language({

  // Префикс селектора для всех узлов, чтобы принять во внимание.
  domNodeSelectorPrefix: 'body',

  // Исходный язык для использования
  default: 'enUS',

  // Список всех поддерживаемых языков.
  selection: [],

  // Язык исходного набора (если он опущен, он будет гостевым).
  initial: null,

  // Разделитель шаблонов для распознавания динамического содержимого.
  templateDelimiter: {pre: '{{', post: '}}'},

  // Указывает, должен ли эффект затухания выполняться.
  fadeEffect: true,

  // Сохраняет информацию о том, как родительские доменные узлы должны быть анимированы, когда содержащий текст будет переключен.
  textNodeParent: {
  show<a href="https://www.jqueryscript.net/animation/">Animation</a>: [{opacity: 1}, {duration: 'fast'}],
  hideAnimation: [{opacity: 0}, {duration: 'fast'}]
  },

  // Шаблон для введения языкового узла перед заменой.
  preReplacementLanguagePattern: '^\\|({1})$',

  // Текстовый шаблон для введения узла замены поста.
  replacementLanguagePattern: '^([a-z]{2}[A-Z]{2}):((.|\\s)*)$',

  // Сохраняет шаблон для распознавания маркера текущего языка.
  currentLanguagePattern: '^[a-z]{2}[A-Z]{2}$',

  // Имя тега узла Dom, которое следует интерпретировать как скрытый альтернативный языковой узел (содержит текст на другом языке).
  replacementDomNodeName: ['#comment', 'langreplacement'],

  // Имена тегов, которые указывают на dom-узлы, которые должны быть заменены.
  replaceDomNodeNames: ['#text', 'langreplace'],

  // Описание блокировки для механизма блокировки, предоставляемого расширенным классом инструментов.
  toolsLockDescription: '{1}Switch',

  // Хеш-префикс для определения текущего активного языка по URL.
  languageHashPrefix: 'language-',

  // Имя класса, которое отмечает текущую кнопку переключения языка или ссылку.
  currentLanguageIndicatorClassName: 'current',

  // Имя, используемое для сохранения предпочтительного языка в локальном хранилище для текущего сеанса.
  sessionDescription: '{1}',

  // Отображение описания альтернативных языков.
  languageMapping: {
  deDE: ['de', 'de_de', 'de-de', 'german', 'deutsch'],
  enUS: ['en', 'en_us', 'en-us'],
  enEN: ['en_en', 'en-en', 'english'],
  frFR: ['fr', 'fr_fr', 'fr-fr', 'french']
  },

  // Отображение необходимых внутренних описаний узлов dom на соответствующие им селекторы.
  domNode: {knownTranslation: 'div.toc'}

}))


7. Доступны функции обратного вызова.
Код
$(($) => $.Language({

  // Обратный вызов, который будет запущен после того, как переключение языка будет завершено.
  onSwitched: this.constructor.noop,

  // Обратный вызов, который будет запущен после проверки языка.
  // Требуется, если в некоторых узлах активен другой язык, чем в других.
  onEnsured: this.constructor.noop,

  // Обратный вызов, который должен быть вызван до переключения языка.
  onSwitch: this.constructor.noop,

  // Обратный вызов, который должен быть вызван до переключения языка, должен быть обеспечен.
  onEnsure: this.constructor.noop,

}))


Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: