A jQuery plugin for displaying Bootstrap alerts via jQuery events.
<div data-alerts="alerts" data-titles='{"warning": "<em>Warning!</em>", "error": "<em>Error!</em>"}' data-ids="myid" data-fade="3000"></div>
<button id="warn-me" class="btn">Click to see a warning alert</button>
<script>
$("#warn-me").click(function() {
$(document).trigger("add-alerts", [
{
"message": "This is a warning.",
"priority": 'warning'
}
]);
});
</script>
Priority: error/danger, warning, info/notice, success
Enable binding of an element via JavaScript:
$("#example").bsAlerts({"titles": {"warning": "<em>Warning!</em>"}});
Just add data-alerts="alerts" to your element to bind automatically.
<div data-alerts="alerts"></div>
| Name | type | default | description |
|---|---|---|---|
| titles | object | {} | Optional title for each priority: error, warning, info, success |
| ids | string | '' | Comma separated list of alert ids to listen for. In addition to the standard events, events in the form 'set-alert-id-{alert_id}' will also be listened for. Works with jQuery-bsFormAlerts. |
| fade | integer | 0 | If set to an integer greater than 0, the alerts will be faded out and removed after the given number of milliseconds. |
| usebullets | boolean | true | If set to false, messages of a given priority will be wrapped in paragraph tags (default is an unordered list), and separate each message of a given priority added by two line break tags (default wraps each in list item tags). |
The bound element will listen for an add event that will send the alert data as an object. You can also pass an array of alerts, with any priority, and they will all be displayed in their respective color.
// send an error alert
$(document).trigger("add-alerts", {
message: "This is an error",
priority: "error"
});
// send an array of alerts
$(document).trigger("add-alerts", [
{
message: "This is an error",
priority: "error"
},
{
message: "This is a warning",
priority: "warning"
},
{
message: "This is success",
priority: "success"
}
]);
The bound element will listen for a clear event that will clear the alerts.
// clear all alerts
$(document).trigger("clear-alerts");
The bound element will also listen for a set event with an id, if configured to do so. See ids in the Options above.
// send an alert with id='myid'
$(document).trigger("set-alert-id-myid", {
message: "Please enter at least 3 characters",
priority: "error"
});