Easy Language Selector With jQuery And LocalStorage

A tiny, blazing fast, jQuery based language selector plugin that allows users to switch between languages on your site and stores the user's language preferences in local storage.

In addition, the plugin automatically changes the text direction to RTL (right-to-left) when an RTL language (Arabic, Hebrew, Persian, Urdu etc.) is selected.

How to use it:

1. Include the minified version of the jQuery Langauge Selector plugin on the page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/LanguageSelector.min.js"></script>

2. Create your translations as shown below.

// language.js
lang = {
  'en': {
    ':heading': 'Javascript Language Selector',
    ':h2': 'This is the sub heading',
    ':first:p': "Hey! this is the javascript language selector",
    ':english': 'English',
    ':urdu': 'Urdu',
    ':portuguese': 'Portuguese',
    ':choose': 'Choose the language',
  },

  'ur': {
    ':heading': 'جاوا اسکرپٹ زبان سلیکٹر',
    ':h2': 'یہ سب عنوان ہے۔',
    ':first:p': "ارے! یہ جاوا اسکرپٹ کی زبان کا سلیکٹر ہے۔",
    ':english': 'انگریزی',
    ':urdu': 'اردو',
    ':portuguese': 'پرتگالی',
    ':choose': 'زبان کا انتخاب کریں۔'
  },
  'pt': {
    ':heading': 'Seletor de Idiomas Javascript',
    ':h2': 'Este é o subtítulo',
    ':first:p': "Ei! este é o seletor de idioma javascript",
    ':english': 'English',
    ':urdu': 'Urdu',
    ':portuguese': 'Portuguese',
    ':choose': 'Escolha o idioma'
  }
};

3. Create a select box for the language selector.

<select id="langSelector">
  <option>:choose</option>
  <option value="en">:english</option>
  <option value="ur">:urdu</option>
  <option value="pt">:portuguese</option>
</select>

4. Insert the text to be translated into the document.

<h1>:heading</h1>
<h3>:h2</h3>
<p>:first:p</p>

5. Enable the language selector.

var l = new LanguageSelector();
$(document).on("change", "#langSelector", function () {
  var s = $(this).children("option:selected").val();
  l.setLang(s);
  window.location = "index.html";
});
l.parse();

---

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