jQuery UI - Aurora plugin - Messages in jQuery UI style

By means of this plug-in it is possible to create "on the fly" beautiful messages in the style of jQuery UI. For work a framework jQuery(versions 1.6 and higher) will be required and any of themes of jQuery UI. jQuery UI framework is not required.

Download (version 0.9): ui.aurora.jsui.aurora.min.js


Distributed under the GNU GPLv2 license

This version is not supported anymore. Please use new version of plugin.

Description of methods and properties of each of them is given below.

  1. Methods
  2. The properties of the methods
    1. The properties of the plugin aurora()
    2. The properties of the method destroy()
  3. Examples


$(selector).aurora(); or $.aurora(); - creates a blank message with no text at default settings.

$(selector).aurora('destroy'); - deletes the message(s).


The properties of the methods:

Plugin options - aurora():

text text of message
container type of external container of message. One of the standards "ui-state-highlight", "ui-state-error", "ui-state-disabled"
icon type of message icon. Any of the standards. All types of icons - jQueryUI Themeroller
styles object with the styles and text styles properties
indent object with the margins.

message_margin - 0.4em 0 0 0
div_padding - 0 0.5em
div_margin - 5px !important
span_margin - 0 0.3em 0 0

span_text_style the style of the message text - overflow: hidden; display: block; padding-left: 5px;
effect object with the animation properties

type - swing
speed - 400

placement where a message should be inserted. 'after', 'before', 'prepend', 'append'
onComplete a function fired after creation of the message
onRemove a function fired after removing the message
only_one specifies on that all messages except the first will be deleted. true/false(default - false)
button show the close/hide button. 'hide' or 'close'.
button_title text of the close/hide button


The properties of the method destroy():

elems_indexes array of indexes of messages that you want to use the plugin. Numbering starts from 0. If you specify the keyword "all", the action will be applied to all objects of the plugin.



Simple demo code:

Create a message and insert into document

	text: 'Lorem ipsum dolor',
	leave_only_first: true

or create an error message and display it in a div

	text: 'Lorem ipsum dolor',
	leave_only_first: true,
	container: 'ui-state-error',
	icon: 'ui-icon-alert'
<div class="message"> </div>

Other examples in demo.