bs-advanced-alert v1.0.1
Bootstrap Advanced Alert
Basic usage
Working in the same way as the standard alert component.
<div class="alert alert-warning in">
<a href="#" class="close" data-dismiss="aalert">×</a>
<div class="alert-content">
<strong>Warning!</strong> There was a problem.
</div>
</div>
Adding open and close effects.
You can add open and close effects the same as the standard component. The available effects are slide
and fade
, classes can be added to the alert component to apply the effects. If no class is added the alert will just hide.
<div class="alert alert-success slide in">
<a href="#" class="close" data-dismiss="aalert">×</a>
<div class="alert-content">
<strong>Success!</strong> Well done.
</div>
</div>
<div class="alert alert-info fade in">
<a href="#" class="close" data-dismiss="aalert">×</a>
<div class="alert-content">
<strong>Info!</strong> This is some info.
</div>
</div>
Timeout
You can add a data-timeout
attribute to close the alert after a set amount of time set in milliseconds.
<div class="alert alert-info fade in" data-timeout="1000">
<a href="#" class="close" data-dismiss="aalert">×</a>
<div class="alert-content">
<strong>Info!</strong> This is some info.
</div>
</div>
The above sample will close after 1 second
jQuery extension api
changeTo
This will change the alert style. The below snippet with change the alert-
class to alert-error
.
$('my-alert').aalert('changeTo', 'error');
changeContentTo
The will change the content of the alert. The function takes a optional second parameter open
. This will open the alert after the content has been changed and is true
by default.
$('.my-alert').aalert('changeContentTo', 'Some new content', false);
closeAfter
This will close the alert after the specified time
$('my-alert').aalert('closeAfter', 2000);
toggle
$('my-alert').aalert('toggle');
close
$('my-alert').aalert('close');
open
$('my-alert').aalert('open');
Changing functions
$('.my-alert')
.aalert('changeTo', 'success')
.aalert('changeContentTo', 'Success message')
.aalert('closeAfter', 3000);