In JTB_MD, badges are uniquely designed elements that serve to provide additional information alongside the main content. These special and eye-catching structures are particularly effective in drawing attention to specific details.

While badges are commonly used to display the number of unread messages, notifications, or indicate fields that require attention, they offer versatile applications within your project, allowing for various use cases and creative implementations.

How to use

Creating and utilizing badge elements in JTB_MD is a straightforward process, with two available methods: Static and Dynamic creation.

To create a badge statically, simply add a <span> element with the .jtbBadge class inside any element where you want the badge to appear.

Badges in JTB_MD are elements that adhere to their parent elements and adjust their positions based on the parent's positioning. Therefore, it's crucial to ensure that the element intended for the badge has the position: relative attribute. Failure to include this attribute will result in the library automatically modifying the parent's position, which may lead to unintended layout conflicts. Keep this in mind to avoid any definition clashes.

                <!-- Define your element & add badge inside it -->
<div id='yourContainer'>
    <span class='jtbBadge'>1</span>
</div>

Types

In JTB_MD there are two types of badges available. The default one designed to display a content in it such as number of notifications, the second type is defined as just a dot to grab attention to one point of the project.

To make your badge in the dot form, you can simply add .jtbBadge-dot class to your badge element.

                    <!-- Badge in dot form -->
<span class='jtbBadge jtbBadge-dot'>1</span>

No Hide

By default the empty badges (including badges with value 0) automatically hides themselves in the DOM. To disable this attribute, you can add your badge .jtbBadge-nohide class.

                    <!-- Badge that do not hide -->
<span class='jtbBadge jtbBadge-nohide'>0</span>

Max Value

Even though you can show any data as your badge content, or make them dots; by default, the badges are developed to show numeric values to users.

If you want to limit the displayed value of your badge, you can utilize the maxVal attribute of it. This attribute allows you to define the maximum numeric value that the badge can show, ensuring a controlled and purposeful display.

                    <!-- Shows 9+ as content -->
<span class='jtbBadge' maxVal='9'>12</span>

Positioning

If you want to position your badge on a specific edge or corner of the parent element, you can add one of the badge positioning classes of JTB_MD to your element.

.jtbBadge-[ TL | TC | TR | LC | RC | BR | BC | BL ] where each character represents the related edge & side.

TL TC TR RC BR BC BL LC

                    <!-- Badge on Top edge & left side -->
<span class='jtbBadge jtbBadge-TL'>TL</span>

Styling

In JTB_MD there are pre-defined styling classes available to change designs of your badge elements. To make your badges more inline with your project you can free to apply them.

Never forget that you can leverage all classes from the Utilities section to seamlessly integrate elements with your design. However, the following pre-defined classes within badges have been crafted to simplify your design workflow.

Colors

JTB_MD enables you to utilize the predefined colors outlined in the Colors section for your badges. To do so, simply apply the desired color class to your elements:

                            <!-- Example colorful badge (Lime) -->
<span class='jtbBadge jtbBadge-dot jtbBadge-lime'>1</span>

Sizes

In JTB_MD, you can also resize your badge elements. To make your badges larger or smaller than the default, simply apply the relevant size-class to your element.

.jtbBadge-[ xs | sm | md | lg | xl ]

                            <!-- Example sized badge (size = xs) -->
<span class='jtbBadge jtbBadge-xs'>1</span>

Removing Borders

To create a borderless badge, simply apply the .jtbBadge-borderless class.

                    <!-- Borderless Badge -->
<span class='jtbBadge jtbBadge-borderless'>1</span>

Rectangular

To create a rectangular badge (with no border radius), apply the .jtbBadge-rect class to your element.

                    <!-- Rectangular Badge -->
<span class='jtbBadge jtbBadge-rect'>1</span>

Javascript Plugin

In JTB_MD, the actions and methods that badges can perform are defined in the jtbBadge plugin. Ensure that you haven't manually removed it from your project to utilize its functionalities properly.

For detailed information on plugins, refer to the JavaScript section.

Methods

With the jtbBadge plugin integrated, you can effortlessly generate and manipulate badges on-the-fly in your project using JavaScript.

If you prefer to avoid traditional methods, such as creating elements directly in HTML, the following methods will be your best companions.

Create

To dynamically create a badge in an element, use the jtbBadge() function with create method and your desired parameters. The format is $(container).jtbBadge('create', { parameters }, callbackFunction); where:

$(container) represents the element in which the badge will be placed,
parameters represents the object that holds badge's details such as content and classes,
callbackFunction (optional) stands for the function that you want to call after the creation of your badge element.

When creating a badge using plugin, the method returns the freshly created badge element. You can assign it to a variable for further use.

If your new badge has a value of "0" and does not have the .jtbBadge-nohide class, the badge will be created by the plugin but will not appear in the DOM.

                        <!-- Define Container -->
<div id='createHere'></div>

<!-- Assign Function to Button -->
<button class='jtbButton' onclick='createBadge()'>Create Badge</button>

<!-- Function to Create Badge -->
<script type='text/javascript'>
    function createBadge() {
        $('#createHere').jtbBadge('create', {
            val: "1",
            classes: "jtbBadge-rect jtbBadge-orange",
            // Additional parameters goes here
        });
    }
</script>

For a personalized touch that aligns with your project's design, you can customize the parameters of the jtbBadge() function as outlined below:

Category	Name	Type	Default Value	Description	Example Usage
Identifiers	id	`String`	""	ID of the badge element. If not specified the system automatically fills it.	`"myBadgeID"`
Identifiers	classes	`String`	""	Classes to be applied to badge element.	`"jtbBadge-lg jtbBadge-rect"`
Content	val	`String`	""	Content to be displayed in badge element.	`"1"`
Content	maxVal	`String`	""	Maximum possible value to limit content.	`"9"`
Design	css	`String`	""	Additional CSS codes to style badge element.	`"font-size:1rem; color:blue;"`
Listeners	animSpeed	`Integer`	300	Speed of animations for methods.	`1000`
	onUpdate	`String`	""	Function that will be called after 'update' method.	`"myCustomFunc('param1');"`
	onShow	`String`	""	Function that will be called after 'show' method.	`"myCustomFunc('param1');"`
	onHide	`String`	""	Function that will be called after 'hide' method.	`"myCustomFunc('param1');"`
	onToggle	`String`	""	Function that will be called after 'toggle' method.	`"myCustomFunc('param1');"`
	onDestroy	`String`	""	Function that will be called after 'destroy' method.	`"myCustomFunc('param1');"`

For val and maxVal parameters, if the applied string includes numeric values; the plugin activates all its numeric controllers such as max value control, step up method etc. For the non-numeric content they will be disabled by default.

Update

After creating a badge element, if you wish to modify any of its defined parameters, you can invoke the jtbBadge() function with update method and your new values.

At this point we need to state that the update method needs to be linked directly to badge element that you want to update instead of the container that holds the badge. The defined format for update is: $(badge).jtbBadge('update', { parameters }, callbackFunction); where:

$(badge) represents the badge element that you want to update,
parameters represents the object that holds badge's details such as content and classes,
callbackFunction (optional) stands for the function that you want to call after the update action.

                        /*----- Update the badge element -----*/
$('#badgeID').jtbBadge('update', {
    // Parameters goes here
});

Show

To make a specific badge visible on your DOM, you can invoke the plugin with the "show" parameter. Unlike the previous two methods, show method has no attribute as parameters. So you can trigger the method as: $(badge).jtbBadge('show', callbackFunction); where:

$(badge) represents the badge element that you want to make visible,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To Show hidden badges -----*/
$("#badgeID").jtbBadge("show");

Hide

To hide a specific badge on your DOM, utilize the jtbBadge() function with the "hide" parameter. Like the "show" method, "hide" has no attribute as parameters. So you can trigger the method as: $(badge).jtbBadge('hide', callbackFunction); where:

$(badge) represents the badge element that you want to make hidden,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To Hide badges -----*/
$("#badgeID").jtbBadge("hide");

Toggle

To toggle visibility of a specific badge on your DOM (hide if visible and make it visible if hidden), utilize the jtbBadge() function with the "toggle" parameter. Like the previous two methods, "toggle" has no attribute as parameters. So you can trigger the method as: $(badge).jtbBadge('toggle', callbackFunction); where:

$(badge) represents the badge element that you want to toggle visibility,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To Change visibility of badge -----*/
$("#badgeID").jtbBadge("toggle");

Destroy

To permanently remove your badge element from the DOM, use the jtbBadge() function with the "destroy" parameter. Please be aware that after destruction, the element is completely removed from the HTML code and cannot be restored. You can trigger the "destroy" method as: $(badge).jtbBadge('destroy', callbackFunction); where:

$(badge) represents the badge element that you want to destroy,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To remove a badge completely -----*/
$("#badgeID").jtbBadge("destroy");

Callbacks

Throughout the process of creating badges and using methods via the plugin, you can execute additional functions after the operation by providing additional parameter to the jtbBadge() function.

The jtbBadge plugin offers three ways to specify a callback function. Since one of them is defining the listeners for element as attributes on their html tags such as onUpdate="console.log('updated');" and you've already saw that we do not go over them again. Here are the two additional methods:

Create a function elsewhere and call it inside jtbBadge().

                    /*-----  Toggle Badge and callback -----*/
$("#badgeID").jtbBadge("toggle", showProcessDone);

/*------ Define showProcessDone in here -------*/
function showProcessDone(){
	badge('Process done boss.');
}

Define the function itself inside jtbBadge().

                    /*----- Toggle Badge and callback -----*/
$("#badgeID").jtbBadge("toggle", function(){
	alert("Process done boss.");
});