Вам нужно информировать посетителя своего сайта о каком-то событии с помощью небольшого сообщения. Sticky дает возможность сформировать такое сообщение легко и стильно. Сообщите своему посетителю об обновлениях, завершении процесса или напомните ему о возможности и преимуществах регистрации на сайте.

Демонстрация

Ниже приводится пример сообщений. По умолчанию сообщение позиционируется справа-вверху и автоматически закрывается через 5 секунд. Также возможно дублирование сообщений, но плагин имеет опцию для запрещения копий.

$.sticky('<b>Вы меня видите?</b><p>...');

$.sticky('Загрузка завершена');

$.sticky('<b>У вас новое сообщение!</b>');

Ответ плагина:

Плагин возвращает строку JSON с полезной информацией о сообщении.

Теперь присоединим плагин к объекту. Ниже имеется элемент div с определенным форматированием. Стили объекта переносятся в сообщение.

$('#SampleBlock').sticky();

Использование

Использовать Sticky очень просто. Добавляем jQuery в раздел head вместе с файлами Sticky.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="sticky.js"></script>
<link rel="stylesheet" href="sticky.css" type="text/css" />

Помните про файл close.png, в котором содержится изображение кнопки закрытия сообщения!

Теперь можно выводить сообщения!

<script>
$(document).ready(function()
  {
    $.sticky('Страница загружена!');
  });
</script>

Или присоединять плагин к объектам.

$('#download_status').sticky();

Манипулирование

Стили для сообщений Sticky задаются в CSS. Для изменения координат позиционирования сообщений необходимо редактировать перменные в файле sticky.js.

var position = 'top-right';     // Место вывода сообщений. Возможные значения: top-left, top-right, bottom-left, bottom-right

var settings =
  {
  'speed'    :    'fast',     // Скорость анимации. Возможные значения: fast, slow, или число (миллисекунды)
  'duplicates'    :    true,     // Возможность дублирования сообщений. Возможные значения: true или false
  'autoclose'    :    5000     // Автоматическое закрытие сообщений. Возможные значения: число (миллисекунд) или false
  };