jQuery Plugin To Translate Webpage In A Given Language - localizationTool
File Size: | 356 KB |
---|---|
Views Total: | 40560 |
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)
- update
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.