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

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

С помощью этого плагина можно создавать "на лету" красивые сообщения в стиле jQuery UI. Для работы потребуется фреймворк jQuery(версии 1.6 и выше) и любая из тем jQuery UI. Сам jQuery UI фреймворк не требуется.

Скачать (версия 0.9): ui.aurora.js, ui.aurora.min.js

Демо

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

Данная версия более не поддерживается. Используйте новую версию плагина.

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

Методы
Свойства методов
1. Свойства плагина aurora()
2. Свойства метода destroy()
Примеры кода

Методы:

$(selector).aurora(); или $.aurora(); - создает пустое сообщение без текста с настройками по умолчанию.

$(selector).aurora('destroy'); - удаляет сообщения.

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

Свойства плагина aurora():

Свойство	Описание
text	текст сообщения
container	тип внешнего контейнера сообщения. Один из стандартных "ui-state-highlight", "ui-state-error", "ui-state-disabled"
icon	тип иконки сообщения. Любое из стандартных. Все типы иконок - jQueryUI Themeroller
styles	объект с значениями стилей и отступов
indent	объект с значениями отступов. 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	строка с значениями стилей - overflow: hidden; display: block; padding-left: 5px;
effect	объект с значениями анимации type - swing, speed - 400
placement	позиция куда будет вставлено сообщение. Значения - 'after', 'before', 'prepend', 'append'.
onComplete	функция вызываемая после создания сообщения
onRemove	функция вызываемая при удалении сообщения
only_one	указывает на то, что все сообщения кроме первого будут удалены. true/false(false по умолчанию)
button	кнопка действия. Значения: hide, close
button_title	текст кнопки зыкрытия/скрытия

Свойства метода destroy():

Свойство	Описание
elems_indexes	массив с индексами сообщений, к которым необходимо применять метод. Нумерация начинается с 0. При указании ключевого слова all, действие будет применено к всем объектам плагина.

Примеры кода

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

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

$.aurora({
	text: 'Lorem ipsum dolor',
	leave_only_first: true
});

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

$('body').aurora({
	text: 'Lorem ipsum dolor',
	leave_only_first: true,
	container: 'ui-state-error',
	icon: 'ui-icon-alert'
});

<div class="message"> </div>

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

< Назад

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