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 {
  position: relative;
  top: -8px;
  left: 8px;
}

JavaScript Inicialization


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


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: 'bootstrap3',
    cookieExp: 30,
    cookieLangName: 'lname',
    cookieLangCode: 'lcode',
    abbreviation: true,
    reload: true,
    alignment: 'left',
    hover: true
  }
);