jquery-attn.js

Basic Usage

The notification message you see above is produced by the jquery-attn.js plugin. No need to code the mark-up.


        //Initialize a notification area for the 'body'. Messages will appear within <ul id="attn-container">...</ul>
        $('body').attn({
            container: '#attn-container'
        });

        //Add a success message to the notification area attached to 'body'.
        $('body').attn('success', '<strong>Welcome, stranger!</strong>');

Of course you are not limited to delivering just good news to your users (the world ain't perfect). You can show error messages, warning messages, and info messages, too.


        $('body').attn('error', '...'); //Displays an error message.

        $('body').attn('warning', '...'); //Displays a warning message.

        $('body').attn('info', '...'); //Displays an info message.

Fade-out

You can also have messages that will fade-out after a specified period. Try it!

The How:


        $('body').attn('error', 'Your message here.', 3000); //Fade out in 3000 ms (3 seconds).

Custom Messages

You can also have messages which contain your own custom content/mark-up. Use the onShow hook to specify your own callback which is called after the message is attached to the container.

Name	Company
John Doe	CIA	Remove
Crazy Ivan	KGB	Remove

Configuration & Options

Initialization / Constructor

Initialization returns an Attn object. See documentation on Attn to know more what can be done.

Option	Type	Description
container	string or a jQuery object	Selector of a `<ul>...</ul>` within the main selector. Messages will be appended to the target list. Default: `'#attn-container'`
msgTypes	object-literal	Define message types and their corresponding options. Default: { success: { classes: 'alert-success' }, error: { classes: 'alert-error' }, warning: { classes: 'alert-warning' }, info: { classes: 'alert-info' } } See Messages documentation for more options.

Messages

Option	Type	Description
message	string	The message content.
closeBtn	string	HTML mark-up of the close button.
fadeOut	integer	The duration until the message fades out. This unit is in milliseconds Default: `null` (Do not fade out)
onClose	function	Executed when the message is removed from the DOM.
onBeforeClose	function	Executed right before the message is removed from the DOM. Argument(s) passed: `jQuery.Event` object. Removal of the message can be stopped by calling `event.preventDefault()` within this callback. `this` context is the AttnMsg instance for the message created.
classes	string	Custom class(es) to add to the message `<li></li>` item.

These options can be passed to .attn() as second parameter, right after the message type. Message types supported out-of-the-box are success, error, info, and warning.

Example:


    $('body').attn('success', { 
        /* Options here */ 
    });

Same options are used when defining message types during initialization.


    $('body').attn({
        container: '#attn-container',
        msgTypes: {
            success: {
                fadeOut: 5000 //Success messages will fade out in 5 seconds.
            }
        }
    });

Attn API documentation

Documentation will follow.

AttnMsg API documentation

An instance of AttnMsg will be generated and returned whenever a message is added to the container.

Method	Description
dismiss()	Dismisses the message. Calls any `onBeforeClose` callback.
close()	Removes the message without calling `onBeforeClose`. Calls any `onClose` callback.
getElement()	Returns the `<li>...</li>` element.
getContainer()	Returns the `Attn` instance of the container where the message is added.