i18Next EXTENSIONi18next is a full-featured i18n javascript library for translating your webapplication.
I18next is an internationalization-framework written in and for JavaScript. But it's much more than that. i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.
There are other variations and versions of this plugin that is a little more advanced. The one we used is a bit ancient and for a purpose of demonstration only.
Find in-depth, guidelines, tutorials and more on i18Next's Official Documentation
Integration demo
initApp.loadScript("js/my_lovely_script.js", myFunction);. This way the plugin and the language file is loaded on demand of the user only. This is triggered using the data attributes data-action="lang"data-lang="en"
Click on the buttons below to change the menu's language:
Configuration options
src/custom/langdirectory. Each language will have its own file and structure looks like below:
Lang file layout
{ "app": { "name": "SmartAdmin" }, "nav": { "application_intel": "Analytics Intel", "application_intel_analytics_dashboard": "Analytics Dashboard", "application_intel_marketing_dashboard": "Marketing Dashboard", }}
HTML indicators to trigger change
<nav> <span data-i18n="nav.application_intel"></span> <span data-i18n="nav.application_intel_analytics_dashboard"></span> <span data-i18n="nav.application_intel_marketing_dashboard"></span></nav>
Script
$.i18n.init({ resGetPath: 'media/data/__lng__.json', load: 'unspecific', fallbackLng: false, lng: applang}, function (t){ $('[data-i18n]').i18n();});
Dependencies (if you wish to load it manually)
<script src="js/app.jquery.bundle.js"></script><script src="js/i18n/i18n.js"></script>