Stikr - плагин для создания всплывающих сообщений на jQuery
Идея плагина совершенно проста – он выводит сообщения (или стикеры) в любом углу экрана. Это может быть как сообщение, которое будет висеть определённое количество секунд и после этого исчезнет, так и сообщение, которое будет скрыто только после того, как вы нажмёте кнопку закрытия.Перёйдем непосредственно к плагину.
Сначала рассмотрим параметры, которые может принимать плагин:
time (по умолчанию 5000) - количество миллисекунд, которое отображается сообщение.
speed (по умолчанию slow) - количество мс, за которое исчезает изображение, либо текстовый параметр (‘normal’, ‘slow’ или ‘fast’).
note - текст сообщения.
className - название класса, который будет добавлен к сообщению.
sticked (по умолчанию false) с параметром true закрепляет сообщение до тех пор, пока оно не будет закрыто кликом по кнопке. По умолчанию этот параметр отключен.
position – массив, содержащий позиции сообщений. По умолчанию сообщения выводятся справа сверху.
Примеры
Теперь перейдём к примерам.Нажми
$.stickr({note:'Самый простой стикер с настройками по умолчанию.',className:'classic'});Нажми
$.stickr({note:'Это ошибка.<br />Чтобы привлечь ваше внимание, она будет оставаться на месте до тех пор, пока вы не закроете её',className:'classic error',sticked:true});Нажми
$.stickr({note:'Проба полупрозрачных изображений',className:'opacity',position:{left:0,top:0}});Нажми
$.stickr({note:'Успей прочитать моё содержимое!',className:'next',position:{right:0,bottom:0},time:1000,speed:300});Нажми
$.stickr({note:'Самый последний из тестовых стикеров. Исчезает очень ме-е-едленно.',className:'last',time:1000,speed:3000});
Код плагина
Рассмотрим подробнее код:
$.stickr = function(o) {
var o = $.extend({ // настройки по умолчанию
time:5000, // количество мс, которое отображается сообщение
speed:'slow', // скорость исчезания
note:null, // текст сообщения
className:null, // класс, добавляемый к сообщению
sticked:false, // не выводить кнопку закрытия сообщения
position:{top:0,right:0} // позиция по умолчанию - справа сверху
}, o);
var stickers = $('#jquery-stickers'); // начинаем работу с главным элементом
if (!stickers.length) { // если его ещё не существует
$('body').prepend('<div id="jquery-stickers"></div>'); // добавляем его
var stickers = $('#jquery-stickers');
stickers.css('position','fixed').css(o.position); // позиционируем
}
var stick = $('<div class="stick"></div>'); // создаём стикер
stickers.append(stick); // добавляем его к родительскому элементу
if (o.className) stick.addClass(o.className); // если необходимо, добавляем класс
stick.html(o.note); // вставляем сообщение
if (o.sticked) { // если сообщение закреплено
var exit = $('<div class="exit"></div>'); // создаём кнопку выхода
stick.prepend(exit); // вставляем её перед сообщением
exit.click(function(){ // при клике
stick.fadeOut(o.speed,function(){ // скрываем стикер
$(this).remove(); // по окончании анимации удаляем его
})
});
} else { // если же нет
setTimeout(function(){ // устанавливаем таймер на необходимое время
stick.fadeOut(o.speed,function(){ // затем скрываем стикер
$(this).remove(); // по окончании анимации удаляем его
});
}, o.time);
}
};
Браузеры, поддерживающие сиё творение
- IE 7+
- Opera 4+
- Firefox 1+
- Safari 1+
- Chrome
P. S. Изначально это был один из первых плагинов для jQuery, написанных мною. Первая версия плагина датируется 19 сентября 2008 года (разумеется, с того времени он неоднократно перерабатывался). Более ранним был только плагин автозаполнения, о котором я расскажу в следующей статье.
Одно "но": "решила" и "сделала". Я женского пола :)
Единственно сложно выдергивать код из этой странички, чтобы настроить плагин.
Очень понравились компактность и универсальность решения.
По коду:
имхо, лучше для создания элементов использовать «jQuery(html, props)» из jquery1.4 - см. пример: jsfiddle.net/X4ceY/
Ещёесть красивый плагин для mootools - "Window.Growl":icebeat.bitacoras.com/mootools/growl/
Там "стикеры" умеют всплывать по центру: высчитывается ширина/высота позиционирования, беря в расчёт положение скролинга.
... Возможно, вам будет интересно взглянуть )
PS почитал страницу "Об авторе" - мега респект! *_*
Продолжайте в том же духе, не сбавляйте оборотов ;)
Постараюсь и дальше в том же духе :)
Так что если у вас что-то не поддерживается - это уже ваша проблема.
напишите, как вы относитесь к HTML5 например =)
А для того чтобы расписать каждый аспект моего отношения понадобится не одна статья :)