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.

<p>Click these buttons run the javascript code.</p>
<button class="info" id="message-show">show</button>
<button class="info" id="message-auto-hide">
  show &amp; hide automaticlly
</button>
<button class="info" id="message-hide">hide</button>
<button class="info" id="message-at-bottom">show at bottom</button>
<button class="info" id="message-with-status">show with status</button>

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')