sordid-favour

Latest updates

The Aurora plugin - Messages in style of jQuery UI, Bootstrap, UIkit

Written on 08 January 2018. Posted in Notes on html, jQuery, php, mysql



With this plugin you can create "on the fly" beautiful messages in the style of jQuery UI, Bootstrap or UIkit. JQuery UI, Bootstrap or UIkit frameworks are not required for the plugin to work, only for message icons.

Download (version 1.2): aurora_1.2.zip

Demo

Distributed under the GNU GPLv2 license or later.

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

  1. Methods
  2. Properties of methods
  3. Examples

Methods:

Aurora.message(data, selector, options); - creates a blank message without text with default settings.

Aurora.remove(selector, options); - deletes a message or all messages.

 

Properties of methods:

Properties of Aurora.message():

PropertyDescription
data Array with objects.

text - message text
type - message type(CSS classname). Can be info, alert, success or any other.
icon - message icon. jQueyUI or Bootstrap 2, 3 or UIkit required. cssClass - this classname will be added to each message.


[
	{
		text: 'Test message for UIkit icons',
		type: 'info',
		icon: 'icon: paint-bucket'
	},
	{
		text: 'Test message for jQueyUI icons',
		type: 'success',
		icon: 'ui-icon ui-icon-lightbulb'
	},
	{
		text: 'Test message for Bootstrap 3 icons',
		type: 'alert',
		icon: 'glyphicon glyphicon-star',
		cssClass: 'abc'
	}
]
selector css-selector where to insert message. Default into <body>. Not used with option attachTo: 'window'
options object with options.

attachTo - where to place the message. window - on top of all elements, document - into <body>.
position - message position. Values: top-left, top-right, top-center, bottom-left, bottom-right, bottom-center, center-left, center-right, center-center. Not used with option attachTo: 'document'.
place - where to place the message. Values: insertAfter, insertBefore, appendTo, prependTo. Not used with option attachTo: 'window'.
replace - if true, all messages will be replaced by one, with the attachTo option and the selector.
Callbacks: onBeforeShow, onAfterShow


{
	attachTo: 'document',
	position: 'top-left',
	place: '',
	replace: false,
	onBeforeShow: function(){},
	onAfterShow: function(){}
}

 

Properties of Aurora.remove():

PropertyDescription
selector css-selector, NodeList or empty value. Leave blank to delete all messages.
options Object with only one option - callback onRemove

 

Examples

Simple demo:

Create a message and insert it into the body of the document


Aurora.message(
	[
		{
			text: 'Test message'
		}
	],
	document.body
);

or create an error message and insert it into <div>


Aurora.message(
	[
		{
			text: 'Test error message',
			type: 'error'
		}
	],
	'#err'
);

<div id="err"> </div>

Other examples see in demo.