Language dropdown flags for Materialize and Bootstrap framework.
You can download this plugin with Bower.
bower install jlang --save
The previous command will only install the necessary files, if you prefer to download the entire source code including the demo content you can use:
git clone https://github.com/josantonius/js-language-dropdown.git
This JavaScript plugin should be used together with the Materialize or Bootstrap framework.
<div id="JLang" class="right">
<div data-lang-code="es-ES" data-src="languages/32/Spain.png">Español</div>
<div data-lang-code="it-IT" data-src="languages/32/Italy.png">Italian</div>
<div data-lang-code="en-GB" data-src="languages/32/United-Kingdom.png">English</div>
<div data-lang-code="de-DE" data-src="languages/32/Germany.png">Deutsche</div>
<div data-lang-code="fr-FR" data-src="languages/32/France.png">French</div>
</div>.language {
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-align-items: center !important;
-ms-flex-align: center !important;
align-items: center !important;
}
.language img {
margin-right: 10px;
}
#lanNavSel {
position: relative;
top: -8px;
left: 8px;
}<script src="jlang.js"></script>
<script>
new JLang();
</script>new JLang({
id: 'languages',
framework: 'materialize',
cookieExp: 30,
cookieLangName: 'lname',
cookieLangCode: 'lcode',
abbreviation: true,
reload: true,
alignment: 'left',
hover: true
}
);<div id="JLang">
<div data-lang-code="es-ES" data-src="languages/32/Spain.png">Español</div>
<div data-lang-code="it-IT" data-src="languages/32/Italy.png">Italian</div>
<div data-lang-code="en-GB" data-src="languages/32/United-Kingdom.png">English</div>
<div data-lang-code="de-DE" data-src="languages/32/Germany.png">Deutsche</div>
<div data-lang-code="fr-FR" data-src="languages/32/France.png">French</div>
</div>.language img {
margin-right: 10px;
}
#lanNavSel {
position: relative;
top: -8px;
left: 8px;
}<script src="jlang.js"></script>
<script>
new JLang({framework: 'bootstrap3'});
</script>new JLang({
id: 'languages',
framework: 'bootstrap3',
cookieExp: 30,
cookieLangName: 'lname',
cookieLangCode: 'lcode',
abbreviation: true,
reload: true,
alignment: 'left',
hover: true
}
);<div id="JLang">
<div data-lang-code="es-ES" data-src="languages/32/Spain.png">Español</div>
<div data-lang-code="it-IT" data-src="languages/32/Italy.png">Italian</div>
<div data-lang-code="en-GB" data-src="languages/32/United-Kingdom.png">English</div>
<div data-lang-code="de-DE" data-src="languages/32/Germany.png">Deutsche</div>
<div data-lang-code="fr-FR" data-src="languages/32/France.png">French</div>
</div>
```html
### CSS Styles
```css
.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);
}<script src="jlang.js"></script>
<script>
new JLang({framework: 'bootstrap4'});
</script>new JLang({
id: 'languages',
framework: 'bootstrap4',
cookieExp: 30,
cookieLangName: 'lname',
cookieLangCode: 'lcode',
abbreviation: true,
reload: true,
alignment: 'left',
hover: true
}
);| 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 id name. (Default: 'languages') |
| hover | Dropdown aligned to the left or right of button. (Default: 'left') |
If this project helps you to reduce your development time, you can sponsor me to support my open source work 😊
This repository is licensed under the MIT License.
Copyright © 2017-2022, Josantonius
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent