This documentation defines use of Message plugin.
You can create dynamic message using jQuery and bootstrap.
This documentation defines use of Message plugin.
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.
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
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>
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 } });
Click Here to see demos of message plugin.
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. |