Message

Elegant way to display tips/message

hello, im a message link here.

hello, im a message.

<div class="message success" data-ride="message" data-duration="2000">
  <div class="inner">hello, im a message <a href="#" title="">link here</a>.</div>
  <span class="close">&times;</span>
</div>

<div class="message bottom warning" data-ride="message">
  <div class="inner">hello, im a message.</div>
  <span class="close">&times;</span>
</div>

API

Message plugin already export to window object.

Click these buttons run the javascript code.

// show message
Message.show('This is message!');

// hide automaticlly after 2000 milliseconds
Message.show('This is message!', 2000);

// hide message
Message.hide();

// show at bottom
Message.show({
  message: 'message body show at bottom',
  // the placement can be `top` or `bottom`, by default is `top`
  placement: 'bottom'
});

// show with status
// add class `danger` to the container
// there're 5 status: [default], success, info, warning, danger
Message.show({
  message: 'message body show with danger status',
  // the placement can be `top` or `bottom`, by default is `top`
  status: 'danger'
});

Options

Name	Type	Default	Description
template	string	`'<div class="message"><div class="inner"></div><span class="close">×'</span></div>'`	Base HTML to use when creating the message. The message's content will be injected into the `.inner`. `.close` will become the message's close. The outermost wrapper element should have the `.message` class.
message	string\|object	null	'message content text/html' `{message: 'text/thml', placement: 'bottom', status: 'danger'}`
placement	string	top	The placement can be `top` or `bottom`, by default is `top`
status	string	''	Show with status, add class `[default]\| success\| info\| warning\| danger` to the container.
duration	number	null	Message hide automaticlly after a number

Methods

$().message(options)

Attaches a message handler to an element collection.

.message('show')

Show the message.

$('#element').message('show')

.message('hide')

Hide the message.

$('#element').message('hide')

.message('toggle')

Toggles the message.

$('#element').message('toggle')

.message('destroy')

Hide and destroys the message.

$('#element').message('destroy')