Делаем плагин на jQuery для показа сообщений-подсказок
В этот раз я хочу рассказать как сделать свой плагин на jQuery для показа небольших сообщений пользователям. Я назвал их сообщения-подсказки (другого названия придумать не смог, так что не придирайтесь). Плагин называется jmessages, думаю о названии ничего разъяснять не надо. Сообщения выводятся в специальном контейнере(в стеке). Ну что же приступим…
Первым делом, что мы сделаем это естественно определим CSS стили для сообщений и самого стека. Сделаем стандартные сообщения темного фона с прозрачностью в 70% (прошу заметить я в CSS стилях использую RGBA, оно работает лишь в браузерах поддерживающие CSS3), также определим стили для контейнера сообщений (для стека), он у нас будет в правом верхнем углу.
#jm_stack_box {
position: fixed; top: 15px; right: 15px;
width: 220px;
}
#jm_stack_box .jm_message {
background-color: #000;
background: rgba(0, 0, 0, .7);
padding: 10px; margin: 0 0 15px 0;
font-family: Tahoma; font-size: 11px;
color: #fff;
cursor: pointer;
border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#jm_stack_box .jm_message h3 {
font-size: 15px; font-weight: normal;
padding: 0; margin: 0 0 5px 0;
}
Ну вот, теперь у нас есть готовые стили. Пора бы переходить к самому плагину. Сообщения у нас будут иметь такие параметры: заголовок, текст, время жизни и поле для переопределения класса.
И так, давайте создадим для начала тело плагина:
(function($) {
$.jmessage = function(header, message, lifetime, class_name) {
// ...
};
})(jQuery);
Теперь перейдем к добавлению сообщений. При добавлении нам нужно получить ссылку на контейнер сообщений(опять же, — стек). Если не удастся получить, тогда мы его создаем, после создаём контейнер сообщения и показываем его в стеке. Сразу вешаем триггер на клик, что бы при клике на сообщение оно скрывалось и удалялось, ну и конечно же устанавливаем таймер для автоматического закрытия сообщения, если время жизни сообщения больше 0.
(function($) {
$.jmessage = function(header, message, lifetime, class_name) {
// получаем стек
var stack_box = $('#jm_stack_box');
// если его нет, тогда создаём
if (!$(stack_box).length) {
stack_box = $('<div id="jm_stack_box"></div>').prependTo(document.body);
}
// создаем контейнер сообщения
var message_box = $('<div class="jm_message ' + class_name + '"><h3>' + header + '</h3>' + message + '</div>');
// эффектно показываем
$(message_box).css('opacity', 0).appendTo('#jm_stack_box').animate({opacity: 1}, 300);
// устанавливаем триггер, при клике закрывать сообщение
$(message_box).click(function() {
$(this).animate({opacity: 0}, 300, function() {
$(this).remove();
});
});
// устанавливаем таймер на закрытие сообщения
if ((lifetime = parseInt(lifetime)) > 0) {
setTimeout(function() {
$(message_box).animate({opacity: 0}, 300, function() {
$(this).remove();
});
}, lifetime);
}
};
})(jQuery);
Теперь наш плагин готов к использованию, вызывать сообщения можно вот таким образом:
$.jmessage('Заголовок', 'Текст сообщения.', 3000, 'test_message');
Теперь добавьте в CSS еще два стиля, для кастомных классов сообщений, а именно сообщение о ошибке и сообщение об успешном выполнении какой-либо операции:
#jm_stack_box .jm_message_error {
background-color: #c00;
background: rgba(125, 0, 0, .5);
}
#jm_stack_box .jm_message_success {
background-color: #0c0;
background: rgba(0, 125, 0, .5);
}
На этом все, если есть вопросы задавайте их в комментариях. Не забывайте экспериментировать, например можно сделать дополнительный блок (с текстом «закрыть все сообщения») в стеке при клике на который, будут закрываться все открытые сообщения.
js error on console object
и я бы fadeOut добавил по таймеру
Тут уже кому как, можно юзать animate, а можно fadeOut :)
Упс :) Забыл убрать вызов консоли, уже поправил!
Спасибки большущие!!
Не за что :)
А в IE 7 чего не работает?
IE не понимает rgba(125, 0, 0, .5); похоже
Скрипт то работает, все правильно, — IE не понимает RGBA(я писал об этом в статье). Просто в IE сообщения получались прозрачные. Уже поправил!
Скажите, пожалуйста, работает ли данный плагин в Joomla (по аналогии)?
Учитывая что в Joomla стоит по умолчанию js-фраемворк MooTools, который конфликтует с jQuery, и сам скрипт сообщений написан на jQuery, то нет. Но можно установить jQuery под Joomla используя метод jQuery.noConflict(). И после этого уже использовать плагин сообщений.
Хм. А как быть в такой ситуации.
Есть такой вод код
function setLike(idLike, contentLike){ var count = 0; $.post("'.plugurl().'ajax/like.php", { id: idLike, content: contentLike}, function(data){ count = data; }); $("#likeId_"+contentLike+"_"+idLike).ajaxSuccess(function(){ $(this).hide(); }); $("#likeCount_"+contentLike+"_"+idLike).ajaxComplete(function(){ $(this).text(count); $.jmessage(\'Заголовок\', \'Текст сообщения.\', 3000, \'jm_message_success\'); }); }При первом вызове setLike все норм.
При повторном выскакивает уже два уведомления.
Если три раза вызываю setLike, то три сообщения и т.д…
Простите, что код без форматирования. Не знал что тут использовать code или pre. или еще что-то)
Для форматирования кода используйте теги js, css, html, php и т.д. в квадратных скобках.
Метод ajaxComplete работает как событие, при каждом вызове функции setLike, вы вешаете на него еще один обработчик, т.е. при каждом вызове увеличивается кол. обработчиков. Вам нужно один раз присвоить обработчик, а потом просто вызывать его и передавать необходимые вам параметры.
Ох. Знать бы как.
Спасибо. Буду разбираться!
Поставил после count = data; при отправке запроса. И все работает вроде корректно.
Спасибо за замечательный скрипт!
Как вариант (не проверял ибо нет времени):
$(/* element */).ajaxComplete(function(e, xhr, settings) { $(this).text(xhr.response); $.jmessage('Заголовок', 'Текст сообщения.', 3000, 'jm_message_success'); }); $(/* element */).ajaxSuccess(function(e, xhr, settings) { $(this).hide(); }); function setLike(idLike, contentLike) { $.post("'.plugurl().'ajax/like.php", { id: idLike, content: contentLike }); }Почитай здесь внимательней: http://api.jquery.com/ajaxComplete/
Спасибо большое!
Еще можно привязывать обработчики к самому XHR объекту, вот ссылка на доку: http://api.jquery.com/jQuery.post/#jqxhr-object
А его обязательно добавлять в свой сайт или можно добавить к примеру для почтового ящика?
И как его добавить? :)
Да на сайт. В смысле к почтовому ящику?