Loading

Messages

Messages are an essential part of the modern web, and they can provide invaluable feedback to the users. Messages in Kubish look nice, they are informative, simple and very easy to set up to whatever requirements you may have, style-wise or otherwise. Take a div, give it an message class, add a color using meaningful classes like error or success and you're practically done!


Base

You have 2 modules waiting to installation. Install
You have 2 modules waiting to installation. Install
You have 2 modules waiting to installation. Install
Warning!
You have 2 modules waiting to installation. Install



Options

Name Type Default
closeSelector string .close
closeEvent string click
animationOpen string fadeIn
animationClose string fadeOut


Set an option

Via data attribute:

<<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"message"</span> data-component=<span class="hljs-string">"message"</span> data-close-selector=<span class="hljs-string">".my-custom-close"</span>>
    ... <span <span class="hljs-built_in">class</span>=<span class="hljs-string">"my-custom-close small"</span>></span>
</<span class="hljs-keyword">div</span>>

Via Javascript:

<span class="hljs-variable">$(</span><span class="hljs-string">'#my-message'</span>).message({
    <span class="hljs-symbol">closeSelector:</span> <span class="hljs-string">'.my-custom-close'</span>
});


Methods

You have 2 modules waiting to installation. Install
MethodDescription
closeManually closes a message.
openOpens a message if it has been closed.

Example

$('#my-message').message('close');


Callbacks

CallbackDescription
openThis event fires immediately when the open instance method is called.
openedThis event is fired when the message has been opened, will wait for CSS animation to complete.
closeThis event fires immediately when the close instance method is called.
closedThis event is fired when the message has been closed, will wait for CSS animation to complete.

Example

$('#my-message').on('closed.message', function()
{
    // do something
})