BADGE
About
HTML, CSS and JS badge UI-component for scalable projects. Go to demo page or check on npm.
- Developed following BEM methodology
- User-friendly and accessible
- Less than 2KB JS (minified)
- JS plugin runs in strict mode
- Compatible with UMD
Dependencies
jQuery
Developed and tested with jQuery 3.2.1
Settings / Options
| Name | Default | Type | Description |
|---|---|---|---|
| updatedClass | badge_updated | string | The class added to the badge when a value update occurs. |
| updatedClassRemoveAfter | 3000 | int > 0 | Remove the updatedClass after the time passed. |
| hiddenClass | badge_hidden | string | The class added to the badge when hideWhenZero is set to true and the badge's value is 0, null, undefined or false. |
| aLabel | You have {X} notifications | string | The accessible label for the badge ({X} will be replaced with the value passed with initialValue or to the method update). |
| useTitle | true | bool | Use the accessible label also as title attribute. |
| initialValue | 0 | string or int | Initial value of the badge. |
| hideWhenZero | false | bool | When true the badge will be hidden by adding the hiddenClass and setting aria-hidden="true" when the badge's value is 0, null, undefined or false. |
Installation
Download the package from GitHub and get the compiled files from the dist folder.
The plugin is also available on npm:
npm install t-aria-badge
Usage
- Include the JS script badge.js - or the minified production script badge.min.js- in the head or the body of your HTML file.
- Include the CSS file badge.css in the head of your HTML file or include the SCSS files in your project.
- Initialise the widget within an inline script tag, or in an external JS file.
HTML
Use following HTML markup to implement a badge:
<span class="badge"></span>IMPORTANT: If a region of the page is responsible for the update of the badge, it is necessary to expose the relation between the badge and the page region with the aria-controls attribute for accessibility.
JS: Initialise
Initialise the plugin as follows:
$('.badge').badge({
option1: value1,
option2: value2
});Methods
The plugin supports following methods: update.
Update:
To update a badge call badge and pass 'update' as first parameter and the new value as second parameter:
$('#my-badge').badge('update', 10);Custom events
This plugin triggers following events:
- badge.initialised after the badge is initialised.
- badge.updated when the badge is updated.
The custom events are triggered on window and return the badge data object as argument.
//add event listener
$(window).on('badge.initialised', function(event, badge){
//perform an action
badge.element.addClass('my-custom-class');
});LICENSE
This project is licensed under the terms of the MIT license.
See LICENSE.md for detailed informations.
