1. 使用
  2. 选项
  3. 方法
  4. 回调

Usage

You have 2 modules waiting to installation. 
<div class="mi-message" data-component="message"> ...  <span class="mi-close mi-icon-close"></span></div>
You have 2 modules waiting to installation. 
<div class="mi-message mi-message-error" data-component="message"> ...  <span class="mi-close mi-icon-close"></span></div>
You have 2 modules waiting to installation. 
<div class="mi-message mi-message-success" data-component="message"> ...  <span class="mi-close mi-icon-close"></span></div>
Warning!
You have 2 modules waiting to installation. 
<div class="mi-message mi-message-warning" data-component="message">
    <h5>...</h5>
    ...
    <span class="mi-close mi-icon-close"></span>
</div>
You have 2 modules waiting to installation. 
<div class="mi-message mi-message-focus" data-component="message"> ...  <span class="mi-close mi-icon-close"></span></div>
You have 2 modules waiting to installation. 
<div class="mi-message mi-message-black" data-component="message"> ...  <span class="mi-close mi-icon-close"></span></div>
You have 2 modules waiting to installation. 
<div class="mi-message mi-message-inverted" data-component="message"> ...  <span class="mi-close mi-icon-close"></span></div>

Options

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

Set an option

Via data attribute:

<div class="mi-message" data-component="message" data-close-selector=".my-custom-close">
    ... <span class="my-custom-close"></span>
</div>

Via Javascript:

$('#my-message').message({
    closeSelector: '.my-custom-close'
});

Methods

You have 2 modules waiting to installation.
Method Description
close Manually closes a message.
open Opens a message if it has been closed.

Example

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

Callbacks

Callback Description
open This event fires immediately when the open instance method is called.
opened This event is fired when the message has been opened, will wait for CSS animation to complete.
close This event fires immediately when the close instance method is called.
closed This 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
})