$(function(){
/**
initialize the plugin wherever you want to see messages
the first param should be the options, specify a ui
framework if you are using one, then send in an array of
events to respond to, with options
**/
$("#messages").envelope(
{uiFramework : 'bootstrap'}, //can also be jquerui or none
[
{
name : 'test.success', //name of event to resond to
message: 'Success saving test.', //message to show
type: 'success', //type of message, success, info, error
callback : function(){console.log("Success!");}
}, //callback to execute once the message is shown
{
name : 'test.error',
message : 'Error saving test.',
type : 'error',
callback : function(){console.log("Oh Noes!");}
},
{
name : 'test.untyped',
message : 'Untyped saving test.',
callback : function(){console.log("What do do?");}
}
]
);
//all we have to do on our elements, or anywhere in our code
//is trigger an event to display a message
$("#successButton").on('click',function(){
$(this).trigger('test.success');
});
$("#errorButton").on('click',function(){
$(this).trigger('test.error');
});
$("#untypedButton").on('click',function(){
$(this).trigger('test.untyped');
});
});
<div id="content">
<div id="messages"></div>
<div id="section">
Hello world.
<input type="button" id="successButton" value="Trigger Success">
<input type="button" id="errorButton" value="Trigger Error">
<input type="button" id="untypedButton" value="Trigger Untyped">
</div>
</div>
External resources loaded into this fiddle: