sordid-favour

Последние обновления

Aurora плагин - Сообщения в стиле jQuery UI, Bootstrap, UIkit

Дата публикации 07 января 2018. Опубликовано в Заметки по html, jQuery, php, mysql



С помощью этого плагина можно создавать "на лету" красивые сообщения в стиле jQuery UI, Bootstrap или UIkit. Фреймворки jQuery UI, Bootstrap или UIkit не требуются для работы плагина, только лишь для иконок сообщений.

Скачать (версия 1.2): aurora_1.2.zip

Демо

Распространяется по лицензии GNU GPLv2 или позднее.

Описание методов и свойств каждого из них приведено далее.

  1. Методы
  2. Свойства методов
  3. Примеры кода

Методы:

Aurora.message(data, selector, options); - создает пустое сообщение без текста с настройками по умолчанию.

Aurora.remove(selector, options); - удаляет сообщение или все сообщения.

 

Свойства методов:

Свойства Aurora.message():

СвойствоОписание
data Массив с объектами.

text - текст сообщения
type - тип сообщения(класс из css). Может быть info, alert, success либо свой.
icon - иконка сообщения. Требуется jQueyUI или Bootstrap 2, 3 или UIkit. cssClass - имя класса будет добавлено к каждому сообщению.


[
	{
		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-селектор куда нужно вставить сообщение. По умолчанию в <body>. Не используется при опции attachTo: 'window'
options объект с дополнительными свойствами.

attachTo - куда выводить сообщение. window - поверх всех элементов, document - в <body>.
position - позиция сообщений. Значения: top-left, top-right, top-center, bottom-left, bottom-right, bottom-center, center-left, center-right, center-center. Не используется при attachTo: 'document'.
place - куда вставлять сообщение. Значения: insertAfter, insertBefore, appendTo, prependTo. Не используется при attachTo: 'window'.
replace - при значении true все сообщения будут заменены одним, с учетом опции attachTo и селектора.
Функции onBeforeShow, onAfterShow


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

 

Свойства Aurora.remove():

СвойствоОписание
selector css-селектор, NodeList или пустое значение. Если оставить пустое значение, то будут удалены все сообщения.
options объект с функцией onRemove

 

Примеры кода

Простой пример кода:

Создаем сообщение и вставляем в тело документа


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

или создаем сообщение об ошибке и выводим его в div


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

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

Остальные примеры смотрите в демо.