jQuery Plugin To Translate Webpage In A Given Language - localizationTool

jQuery Plugin To Translate Webpage In A Given Language - localizationTool
File Size: 356 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A jQuery based localization tool for international websites that translates the text (strings) in a given language selected from a dropdown list. Right-to-Left language supported as well.

How to use it:

1. Make sure UTF-8 encoding is specified.

<meta charset="utf-8">

2. Include the required CSS file in the head section.

<link rel="stylesheet" href="path/to/jquery.localizationTool.css">

3. Add some content to be translated.

<p id="welcomeText">Welcome!</p>

4. Markup for the language selection tool (this is where the localization widget will appear).

<div id="selectLanguageDropdown" class="localizationTool"></div>

5. Add the jQuery localizationTool plugin after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="path/to/jquery.localizationTool.js"></script>

6. Setup the plugin.

$('#selectLanguageDropdown').localizationTool({
'defaultLanguage' : 'en_GB',
/* do not throw error if a selector doesn't match */
'ignoreUnmatchedSelectors': false,
/* show the flag on the widget */
'showFlag' : true,
/* show the language on the widget */
'showLanguage': true,
/* show the country on the widget */
'showCountry': true,
/* format of the language/country label */
'labelTemplate': '{{country}} {{(language)}}',
'languages' : {
    /*
     * The format here is <country code>_<language code>.
     * - list of country codes: http://www.gnu.org/software/gettext/manual/html_node/Country-Codes.html
     * - list of language codes: http://www.gnu.org/software/gettext/manual/html_node/Usual-Language-Codes.html#Usual-Language-Codes
     */
},
/*
 * Strings are provided by the user of the plugin. Each entry
 * in the dictionary has the form:
 *
 * [STRING_IDENTIFIER] : {
 *      [LANGUAGE] : [TRANSLATION]
 * }
 *
 * STRING_IDENTIFIER:
 *     id:<html-id-name>           OR
 *     class:<html-class-name>     OR
 *     element:<html-element-name> OR
 *     <string>
 *
 * LANGUAGE: one of the languages defined above (e.g., it_IT)
 *
 * TRANSLATION: <string>
 *
 */
'strings' : {},
/*
 * A callback called whenever the user selects the language
 * from the dropdown menu. If false is returned, the
 * translation will not be performed (but just the language
 * will be selected from the widget).
 *
 * The countryLanguageCode is a string representing the
 * selected language identifier like 'en_GB'
 */
'onLanguageSelected' : function (/*countryLanguageCode*/) { return true; }
});

Change logs:

v0.0.24 (2017-09-06)

v0.0.21 (2016-09-18)

  • add Greek, Greece, Malayalam and India

v0.0.19 (2015-10-05)

  • Add labelTemplate option/setting

v0.0.17 (2015-07-20)

  • update

v0.0.14 (2015-02-03)

  • Fix br_PT into pt_BR language code

v0.0.13 (2014-09-22)

  • translate attributes with a syntax like <attributeName>::<elementSelector> (e.g., placeholder::element:input)

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