ALERTS

It is possible to give feedback to users with style! There are multiple alert boxes defined in JTB_MD.

How to use

Alerts are available for any length of text, as well as an optional dismiss button. To create an alert element, simply add .jtbAlert class into a division.

Hi! I'm default jtbAlert!
			Copy
			<!-- Default jtbAlert box -->
<div class='jtbAlert'>Hi! I'm default jtbAlert!</div>
		

Coloring

For proper styling, we are recommending you to use pre-defined versions of jtbAlerts. Although you can create your own alert types with extra css codes, it would be a good choice to use predefined classes to use all alert abilities effectively.

Hi! I'm an alert box!
Hi! I'm an alert box!
Hi! I'm an alert box!
Hi! I'm an alert box!
Hi! I'm an alert box!
Hi! I'm an alert box!
Hi! I'm an alert box!
Hi! I'm an alert box!
Hi! I'm an alert box!
Hi! I'm an alert box!
			Copy
			<!-- Coloring is available with pre-defined jtbAlert classes -->
<div class='jtbAlert jtbAlertBlue'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertPurple'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertPink'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertRed'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertOrange'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertYellow'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertGreen'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertTeal'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertAqua'>Hi! I'm an alert box!</div>
<div class='jtbAlert jtbAlertGray'>Hi! I'm an alert box!</div>
		

Links inside alerts

The links inside alerts will be bold and has related color attribute with its parent alert.

Hi! I'm an alert box link!
Hi! I'm an alert box link!
Hi! I'm an alert box link!
Hi! I'm an alert box link!
Hi! I'm an alert box link!
Hi! I'm an alert box link!
Hi! I'm an alert box link!
Hi! I'm an alert box link!
Hi! I'm an alert box link!
Hi! I'm an alert box link!
			Copy
			<!-- The links has their own styles too inside alerts -->
<div class='jtbAlert jtbAlertBlue'>Hi! I'm an alert box <a href='...'>link</a>!</div>
<div class='jtbAlert jtbAlertPurple'>Hi! I'm an alert box <a href='...'>link</a>!</div>
<div class='jtbAlert jtbAlertPink'>Hi! I'm an alert box <a href='...'>link</a>!</div>
<div class='jtbAlert jtbAlertRed'>Hi! I'm an alert box <a href='...'>link</a>!</div>
<div class='jtbAlert jtbAlertOrange'>Hi! I'm an alert box <a href='...'>link</a>!</div>
<div class='jtbAlert jtbAlertYellow'>Hi! I'm an alert box <a href='...'>link</a>!</div>
<div class='jtbAlert jtbAlertGreen'>Hi! I'm an alert box <a href='...'>link</a>!</div>
<div class='jtbAlert jtbAlertTeal'>Hi! I'm an alert box <a href='...'>link</a>!</div>
<div class='jtbAlert jtbAlertAqua'>Hi! I'm an alert box <a href='...'>link</a>!</div>
<div class='jtbAlert jtbAlertGray'>Hi! I'm an alert box <a href='...'>link</a>!</div>
		

Full content

You can also include more elements inside the .jtbAlert boxes.

WOOHOO!


There is a celebration!

			Copy
			<!-- Alert with more than one content -->
<div class='jtbAlert jtbAlertGreen'>
	<h3>WOOHOO!</h3>
	<hr>
	<p>There is a celebration!</p>
</div>
		

Dissmissable

To make your alert dismissable, make sure that you've included jtb_mb.js file in your code to allow alert plugin and; add .jtbAlertDissmissable class to your alert with a closing button with .closeBtn class.

Hello!
			Copy
			<!-- Dissmissable alert -->
<div class='jtbAlert jtbAlertGreen jtbAlertDissmissable'>
	<i class='jtb-times closeBtn'></i>
	Hello!
</div>
		

Javascript behaviour

Initializing

Javascript behaivours of alerts have been written in alert.js plugin of jtb_md.js. To avoid any problematic behaviour on alerts; do not remove this plugin manually and make sure that you included required js files in your code.

Defaults

The default setup of jtbAlert is like the following:

Name Type Default Description
_vers String '0.0.7' Shows the current version of jtbAlert plugin.
callbackSpeed Integer 600 Shows the callback speed of jtbAlert methods as miliseconds. Adjusted for optimal level for animations of alerts.

Methods

You can use the .jtbAlert methods to make an alert perform action.

Show

If you want to make a spesific alert visible, you can easily call the jtbAlert function with parameter show.

				Copy
				/*----- Makes the related alert visible on DOM ------*/
$('#alertID').jtbAlert('show')
			

Hide

If you want to make a spesific alert hidden, you can easily call the jtbAlert function with parameter hide.

				Copy
				/*----- Makes the related alert hidden on DOM ------*/
$('#alertID').jtbAlert('hide')
			

Toggle visibility

If you want to change a spesific alert's visibility, you can easily call the jtbAlert function with parameter toggle.

				Copy
				/*----- Changes the visibility of alert ------*/
$('#alertID').jtbAlert('toggle')
			

Destroy

If you want to destroy a spesific alert, you can easily call the jtbAlert function with parameter destroy.

				Copy
				/*----- Removes the alert from DOM ------*/
$('#alertID').jtbAlert('destroy')
			

Callbacks

It is also possible to run a function after using a method in JTB_MD via callbacks. All you need to do is while calling your method to do something with elements, create a callback after specifying method type. For example:

This is an example alert
				Copy
				/*----- Just Specify Your Callback Function After Your Method ------*/
$('#alertID').jtbAlert('toggle', showDone);

/*----- This is an example Callback Function -----*/
function showDone(){
	alert('Process done boss!');
}