Javascript Langauge Selector is to create your own front-end website in multiple languages with this category. A very small and fast plugin that relies on jQuery for language identification allows users to switch between languages on your site and store user language preferences in local storage.
In addition, the plugin automatically changes the text direction to RTL (right to left) when selecting a right-to-left language (Arabic, Hebrew, Farsi, Urdu, etc.).
Features:
- Simple yet powerful.
- Enable RTL automatically.
- Very fast.
- Much more…
Must Read: [MS Word] A jQuery Plugin That Allows an HTML Page To Be Converted | googoose
How to make use of it:
1. Include the jQuery Langauge Selector plugin on the web 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 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 choose 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();
See Demo And Download
Official Website(lablnet): Click Here
This superior jQuery/javascript plugin is developed by lablnet. For extra Advanced Usage, please go to the official website.