Customizable jQuery Page Localization Plugin - internationalisation
File Size: | 12.4 KB |
---|---|
Views Total: | 6767 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

internationalisation is a customizable jQuery web page localization and globalization plugin that makes it easier to translate any strings within your document on client side.
Installation:
# NPM $ npm install internationalisation
How to use it:
1. Install and import the internationalisation into your project.
$ npm install internationalisation --save
2. Or include the compiled version on the web page as follow:
<script src="//code.jquery.com/jquery.min.js"></script> <script src="//unpkg.com/internationalisation"></script>
3. Add alternate version of your text as these:
<h1> Hello World! <!--deDE:Hallo Welt!--> <!--frFR:Bonjour le monde!--> </h1>
4. Create the links to switch between languages.
<a href="#language-deDE">de</a> <a href="#language-enUS">en</a> <a href="#language-frFR">fr</a>
5. Initialize the plugin with default options.
$(($) => $.Language())
6. Default configuration options.
$(($) => $.Language({ // Selector prefix for all nodes to take into account. domNodeSelectorPrefix: 'body', // Initial language to use default: 'enUS', // List of all supported languages. selection: [], // Initial set language (if omitted it will be guest. initial: null, // Template delimiter to recognize dynamic content. templateDelimiter: {pre: '{{', post: '}}'}, // Indicates whether a fade effect should be performed. fadeEffect: true, // Saves informations how parent dom nodes should be animated when containing text will be switched. textNodeParent: { showAnimation: [{opacity: 1}, {duration: 'fast'}], hideAnimation: [{opacity: 0}, {duration: 'fast'}] }, // Pattern to introduce a pre replacement language node. preReplacementLanguagePattern: '^\\|({1})$', // Text pattern to introduce a post replacement node. replacementLanguagePattern: '^([a-z]{2}[A-Z]{2}):((.|\\s)*)$', // Saves a pattern to recognize current language marker. currentLanguagePattern: '^[a-z]{2}[A-Z]{2}$', // Dom node tag name which should be interpreted as a hidden alternate language node (contains text in another language). replacementDomNodeName: ['#comment', 'langreplacement'], // Tag names which indicates dom nodes which should be replaced. replaceDomNodeNames: ['#text', 'langreplace'], // Lock description for the locking mechanism provided by the extended tools class. toolsLockDescription: '{1}Switch', // Hash prefix to determine current active language by url. languageHashPrefix: 'language-', // Class name which marks current language switcher button or link. currentLanguageIndicatorClassName: 'current', // Name to use for saving preferred language in local storage for current session. sessionDescription: '{1}', // A mapping of alternate language descriptions. languageMapping: { deDE: ['de', 'de_de', 'de-de', 'german', 'deutsch'], enUS: ['en', 'en_us', 'en-us'], enEN: ['en_en', 'en-en', 'english'], frFR: ['fr', 'fr_fr', 'fr-fr', 'french'] }, // A mapping of needed internal dom node descriptions to their corresponding selectors. domNode: {knownTranslation: 'div.toc'} }))
7. Callback functions available.
$(($) => $.Language({ // Callback which will be triggered after a language switch has been finished. onSwitched: this.constructor.noop, // Callback which will be triggered after a language check has been performed. // Needed if some nodes have another language active then others. // Useful if only some parts of the dom tree was updated and a full language update isn't required. onEnsured: this.constructor.noop, // Callback which should be called before a language switch should be performed. onSwitch: this.constructor.noop, // Callback which should be called before a language switch should be ensured. onEnsure: this.constructor.noop, }))
Changelog:
2025-01-30
- v1.0.333
This awesome jQuery plugin is developed by thaibault. For more Advanced Usages, please check the demo page or visit the official website.