Home

How to use jquery.message

Options

All options are optional.

option	values	default	description
message	any text or html	inner html of the matched element	the message
type	info, error	info	the type of message
dismiss	true, false	true	if true, "Click to dismiss" is appended to the message and clicking it will hide the message

Methods

method	arguments	description
show	none	shows the message
hide	none	hides the message
options	options	changes the options
destroy	none	restores the matched element to the state it was in before the message plugin was applied

Examples

See a live demo: http://jrummell.github.io/jquery-message

<script type="text/javascript">
    $(document).ready(function()
    {
        $("#message1").message();
        $("#message2").message({type:"error"});
        $("#message3").message({type:"info", message:"Here's an info message with dynamic content."});
        $("#message4").message({dismiss: false});
        $("#message5").message();
        $("#message6").message({dismiss: false});
        
        $("#message5-button").click(function()
        {
            $("#message5").message('options', {type:"error", message:"Error"});
        });
        
        $("#message6-hide").click(function()
        {
            $("#message6").message("hide");
        });
        
        $("#message6-show").click(function()
        {
            $("#message6").message("show");
        });
    });
</script>
<div id="message1">Here's an info message.</div>
<div id="message2">Here's an error message.</div>
<div id="message3"></div>
<div id="message4">Here's an info message without dismiss.</div>
<div>
    <div id="message5">Click the following button to change this to an error.</div>
    <button id="message5-button">Change to Error</button>
</div>
<div>
    <div id="message6">Click the following buttons to show or hide.</div>
    <button id="message6-hide">Hide</button>
    <button id="message6-show">Show</button>
</div>