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
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:
src/custom/lang
directory. Each language will have its own file and structure looks like below:
{ "app": { "name": "SmartAdmin" }, "nav": { "application_intel": "Analytics Intel", "application_intel_analytics_dashboard": "Analytics Dashboard", "application_intel_marketing_dashboard": "Marketing Dashboard", } }
<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>
$.i18n.init({ resGetPath: 'media/data/__lng__.json', load: 'unspecific', fallbackLng: false, lng: applang }, function (t){ $('[data-i18n]').i18n(); });
<script src="js/app.jquery.bundle.js"></script> <script src="js/i18n/i18n.js"></script>