Create A Multilingual Website Using jQuery L10N Plugin

File Size: 25.7 KB
Views Total: 2324
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Create A Multilingual Website Using jQuery L10N Plugin

L10N is a smart and simple-to-use jQuery plugin created for your multilingual website that enables the user to translate the web content by selecting a language from a language switcher.

The plugin automatically stores the language you users selected in the local storage. If not found on the next visit, it will automatically select the proper language depending on the html lang attribute.

How to use it:

1. Download & Install.

# NPM
$ npm install jquery.l10n --save

2. Import the jQuery L10N plugin into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="jquery.l10n.js"></script>

3. Create your own translations in the JavaScript.

const words = {
      ar: {
        "Music is a moral law. It gives soul to the universe, wings to the mind, flight to the imagination, and charm and gaiety to life and to everything.": "المسيقى هي قانون أخلاقي. إنه يعطي الروح للكون ، والأجنحة إلى العقل ، والانتقال إلى الخيال ، والسحر والإبهار بالحياة وكل شيء.",
        "Demo": "عرض",
        "Plato": "أفلاطون",
      },
      fr: {
        "Music is a moral law. It gives soul to the universe, wings to the mind, flight to the imagination, and charm and gaiety to life and to everything.": "La musique est une loi morale. Il donne une âme à l'univers, des ailes à l'esprit, une fuite vers l'imagination, du charme et de la gaieté envers la vie et tout.",
        "Demo": "Demo",
        "Plato": "Platon",
      },
      en: {
        "Music is a moral law. It gives soul to the universe, wings to the mind, flight to the imagination, and charm and gaiety to life and to everything.": "Music is a moral law. It gives soul to the universe, wings to the mind, flight to the imagination, and charm and gaiety to life and to everything.",
        "Demo": "Demo",
        "Plato": "Plato",
      }
};

4. Initialize the plugin and specify the word list & default language.

<h1 class="l10n">Demo</h1>
<blockquote class="l10n">
    Music is a moral law. It gives soul to the universe, wings to the mind, flight to the imagination, and charm and gaiety to life and to everything.
</blockquote>
<cite class="l10n">Plato</cite>
const l10n = $('.l10n').l10n({
      lang: 'en',
      dictList: words
});

5. Switch to a specific language.

l10n.setLanguage('ar');

6. Get the text to be translated.

l10n.getText('Your text');

7. Enable the dynamic language switching. When enabled, the plugin automatically translates your webpage based on the language selection stored in the local storage, or the language name defined in the html lang attribute.

const l10n = $('.l10n').l10n({
      lang: 'en',
      dictList: words,
      dynamicLang: true
});

Changelog:

v1.0.2 (2019-01-30)

  • Bugfix

This awesome jQuery plugin is developed by karim88. For more Advanced Usages, please check the demo page or visit the official website.