HTML Structure

The first defined language is used as the default language.

<div id="JLang">
  <div data-lang-code="es-ES" data-src="bower_components/jlang/languages/32/spain.png">Español</div>
  <div data-lang-code="it-IT" data-src="bower_components/jlang/languages/32/Italy.png">Italian</div>
  <div data-lang-code="en-GB" data-src="bower_components/jlang/languages/32/United-Kingdom.png">English</div>
  <div data-lang-code="de-DE" data-src="bower_components/jlang/languages/32/Germany.png">Deutsche</div>
  <div data-lang-code="fr-FR" data-src="bower_components/jlang/languages/32/France.png">French</div>
</div>

CSS Styles


.language img {
  margin-right: 10px;
}

#lanNavSel {
  margin-left: 8px;
  margin-right: 8px;
}

#imgNavSel {
  margin-top: -1px;
}

#languages {
  padding: 5px;
}

#languages:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

JavaScript Initialization


new JLang({framework: 'bootstrap4'});


JLang Options


Option Name Description
id Dropdown id name. (Default: 'languages')
framework Framework name. (Default: 'materialize')
cookieExp Cookie expiration time in days. (Default: 30)
cookieLangName Cookie name for save the selected language name. (Default: 'lname')
cookieLangCode Cookie name for save the selected language code. (Default: 'lcode')
abbreviation Display abbreviation and caret. (Default: true)
reload Reload page when selecting language. (Default: true)
alignment Dropdown aligned to the left or right of button. (Default: 'left')
hover Activate on hover. (Default: true)

JLang Demo


new JLang({
    id: 'languages',
    framework: 'bootstrap4',
    cookieExp: 30,
    cookieLangName: 'lname',
    cookieLangCode: 'lcode',
    abbreviation: true,
    reload: true,
    alignment: 'left',
    hover: true
  }
);