jQuery Plugin For Sliding Message Bar with Boostrap Alerts Component - Bootstrap Msg

Bootstrap Msg is a jQuery plugin that uses Bootstrap's alerts component to display alert messages in a sliding message bar at the top of the page. Currently supports 4 types of message provided by Bootstrap: 'success', 'info', 'warning' and 'danger'.

Basic Usage:

1. Include the jQuery javascript library and jQuery Boostrap Msg plugin in the Html document.

<link rel="stylesheet" type="text/css" href="bootstrap-msg.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-msg.js"></script>

2. Include the required Twitter Boostrap 3 in the document.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

3. Include the Font Awesome if you wish to use FontAwesome icons instead of Bootstrap icons.

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />

4. Show message.

Msg.show(message, type, timeout);

• message: The message content
• type: The type of message. Can be `success`, `info`, `warning` and `danger`.
• timeout: The duration of message. Default is 3000 (ms)

5. Show specified type message.

Msg.success(message, timeout);
Msg.info(message, timeout);
Msg.warning(message, timeout);
Msg.error(message, timeout);
Msg.danger(message, timeout);

Change log:

2014-05-14

• Default timeout for each of message type

v0.2 (2014-05-07)

• update.

---

This awesome jQuery plugin is developed by bobkhin. For more Advanced Usages, please check the demo page or visit the official website.