jQuery Bootstrap Message

You can create dynamic message using jQuery and bootstrap.

Documentation

This documentation defines use of Message plugin.

Description

This jQuery plugin creates a message using bootstarp for your website. Currently this is available for four type of messages (info, warning, success and danger)

Current version: 1.0

Download this plugin and use it to display message in your website.

Features

  • Fully customized
  • Responsive
  • Tested: jQuery 1.10.x in Firefox, Safari, Chrome, Internet Explorer 9, 10,11, Opera
  • Lightweight: 9.6KB of JavaScript (less than 4KBs gzipped).
  • Load before and load after callback

Instructions & Help

First read usage of plugin (see below). If you found any issue or want any help submit it at GitHub or email me yoku2010@gmail.com

Installation

After plugin downloading. Import these js and css file into your page and call plugin to create message (see usage).

<!-- CSS files-->
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.bootstrap.message.css">

<!-- JS files-->
<script type="text/javascript" src="js/libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/libs/bootstrap.min.js"></script>
<script type="text/javascript" src="js/libs/jquery.bootstrap.message.js"></script>

Usage

jQuery Bootstrap Message Plugin accepts setting (Json Object) to behave differently, It can be assigned to any HTML element (preferred element is div) or create new element.

// Format:
$(selector).message({key:value, key:value, key:value});
// Examples:
$('#success_msg').message({
    type: 'success',
    html: 'Well Done!  You did great job.',
    icon: true,
    close: false,
    autoHide: 4000
});

$().message({
    type: 'danger',
    html: 'This is message in particular div.',
    position: 'top',
    icon: true,
    beforeFunc: function () {
        // code to execute before plugin execution
    },
    afterFunc: function () {
        // code to execute after plugin execution
    },
    onCloseFunc: function () {
        // code to execute on close event of message box
    }
});

Demo

Click Here to see demos of message plugin.

Settings

Property Default Description
type info To define type of message. type can be 'info', 'warning', 'success' or 'danger'.
html Enter Your Message It has message's text. you can define text in html format also.
icon false true will show message icon and false means no icon.
position null To define position of the message. value of this poperty can be 'top', 'top-left', 'top-right', 'bottom', 'bottom-left' or 'bottom-right'.
width null To define width of the message box (in the case of 'top-left', 'top-right', 'bottom-left' or 'bottom-right' position).
close true To show close button in the message box.
autoHide null Define time (in ms) to auto hide the message box.
animationTime 1000 Define time (in ms) for message box close animation.
beforeFunc function () {} To execute a code before creating the message box.
afterFunc function () {} To execute a code after creating the message box.
onCloseFunc function () {} To execute a code on close event of message box.

Follow me on Twitter,GitHub,LinkedIn or Facebook