MicroLang
Download Configuration <!-- Include script --> <script src="MicroLang.js"></script> <!-- Init MicroLang --> <script> //- Add languages to be used (first is active) MicroLang(['en', 'es', 'it', 'fr']) </script> Navigation <!-- Hash links emit the Language Switching --> <nav> <a href="#en">English</a> <a href="#es">Español</a> <a href="#it">Italiano</a> <a href="#fr">Français</a> </nav> <!-- Active button gets the class .active-language --> <!-- Hash in the url # changes to active language --> Text <span data-es="Esto es español" data-it="Questo è italiano" data-fr="C'est français"> This is english </span>
This is english
<strong data-es="Solo inglés y español"> Just english and spanish </strong>
Just english and spanish
Attribute <input data-lang-attr="placeholder" placeholder="Write here" data-es="Escribe aquí" data-it="Scrivere qui" data-fr="Écrivez ici" />
<img data-lang-attr="src" src="https://flagcdn.com/144x108/us.png" data-es="https://flagcdn.com/144x108/es.png" data-it="https://flagcdn.com/144x108/it.png" data-fr="https://flagcdn.com/144x108/fr.png" />
Visible & Hidden (CSS Classes) <span class="visible-en">😀</span> <span class="visible-es">😀</span> <span class="hide-it">😀</span> <span class="hide-fr">😀</span>
Programmatically <!-- Method MicroLangSwitch(<language Id>)--> <button onclick="MicroLangSwitch('en')">EN</button> <!-- Script "onhaschange" to switch. Replacing the hash also works: --> location.hash=lang;