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.js, ui.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.
Methods:
$(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():
| Property | Description |
|---|---|
| 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 |
| span_text_style | the style of the message text - overflow: hidden; display: block; padding-left: 5px; |
| effect | object with the animation properties
type - swing |
| 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():
| Property | Description |
|---|---|
| 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. |
Examples
Simple demo code:
Create a message and insert into document
$.aurora({
text: 'Lorem ipsum dolor',
leave_only_first: true
});or create an error message and display it in a div
$('body').aurora({
text: 'Lorem ipsum dolor',
leave_only_first: true,
container: 'ui-state-error',
icon: 'ui-icon-alert'
});<div class="message"> </div>Other examples in demo.