jQuery Bootstrap alerts – BS Alerts

BS-Alerts (event based notification plugin) is a nice solution of jQuery Bootstrap alerts, easy to use in our web projects.

Event based alerts with jQuery Bootstrap alerts plugin

BS-Alerts is a jQuery plugin to make creating jQuery event based notifications (info/success, warning, error) easy. It it based on Twitter Bootstrap and HTML5 data- attributes.

Event based notifications with jQuery Bootstrap alerts plugin
Event based notifications with jQuery Bootstrap alerts plugin

Key features:

– Modeled after Bootstrap’s plugins

– Automatic binding via HTML5 data attributes

– Event based

Basic usage

Include the plugin and jQuery to the document. Create markup – just add data-alerts=”alerts” to your element to bind automatically:

<div data-alerts="alerts"></div>

Enable binding of an element via JS:

$("#demo").bsAlerts({'titles': {'warning': '<em>Warning!</em>'}});

Another example

Define an alert in HTML:

<div data-alerts="alerts" data-titles="{'warning': '<em>No!</em>'}" 
  data-ids="myid" data-fade="5000">
</div>

Add the JS code to start the alert:

$(document).trigger("add-alerts", [{
    'message': "Warning!",
    'priority': 'warning'
  }
]);

The priority parameter may have one of these values: error / danger, warning, info / notice, success.

License: MIT

Demo & docs:

http://eltimn.github.com/jquery-bs-alerts

Get jQuery Bootstrap alerts from GitHub:

https://github.com/eltimn/jquery-bs-alerts

See also:

AlertifyJS – pretty JavaScript notifications

Bootbox.js – easy Bootstrap modal dialogs

Enjoy!

Share:Share on Facebook3Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1