• Все категории
• CSS3
• Freebies
• HTML5
• jQuery
• PHP
• Обзоры
• Разное

#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);

(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');

#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);
}

Комментарии (22)

• js error on console object

  

  Написал ДимКа
  10 Август 2010 в 21:13 ответить

• и я бы fadeOut добавил по таймеру

  

  Написал ДимКа
  10 Август 2010 в 21:14 ответить

• Тут уже кому как, можно юзать animate, а можно fadeOut :)

  

  Написал sofcase
  10 Август 2010 в 21:24 ответить

• Упс :) Забыл убрать вызов консоли, уже поправил!

  

  Написал sofcase
  10 Август 2010 в 21:19 ответить

• Спасибки большущие!!

  

  Написал Andy
  11 Август 2010 в 15:39 ответить

• Не за что :)

  

  Написал sofcase
  11 Август 2010 в 22:13 ответить

• А в IE 7 чего не работает?

  

  Написал Andy
  11 Август 2010 в 15:42 ответить

• IE не понимает rgba(125, 0, 0, .5); похоже

  

  Написал Andy
  11 Август 2010 в 16:08 ответить

• Скрипт то работает, все правильно, — IE не понимает RGBA(я писал об этом в статье). Просто в IE сообщения получались прозрачные. Уже поправил!

  

  Написал sofcase
  11 Август 2010 в 22:12 ответить

• Скажите, пожалуйста, работает ли данный плагин в Joomla (по аналогии)?

  

  Написал @eruspl
  23 Январь 2011 в 20:52 ответить

• Учитывая что в Joomla стоит по умолчанию js-фраемворк MooTools, который конфликтует с jQuery, и сам скрипт сообщений написан на jQuery, то нет. Но можно установить jQuery под Joomla используя метод jQuery.noConflict(). И после этого уже использовать плагин сообщений.

  

  Написал sofcase
  24 Январь 2011 в 00:06 ответить

• Хм. А как быть в такой ситуации.
  Есть такой вод код

  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, то три сообщения и т.д…

  

  Написал Евгений
  24 Октябрь 2011 в 11:57 ответить

• Простите, что код без форматирования. Не знал что тут использовать code или pre. или еще что-то)

  

  Написал Евгений
  24 Октябрь 2011 в 11:58 ответить

• Для форматирования кода используйте теги js, css, html, php и т.д. в квадратных скобках.

  

  Написал sofcase
  24 Октябрь 2011 в 12:33 ответить

• Метод ajaxComplete работает как событие, при каждом вызове функции setLike, вы вешаете на него еще один обработчик, т.е. при каждом вызове увеличивается кол. обработчиков. Вам нужно один раз присвоить обработчик, а потом просто вызывать его и передавать необходимые вам параметры.

  

  Написал sofcase
  24 Октябрь 2011 в 12:32 ответить

• Ох. Знать бы как.

  Спасибо. Буду разбираться!

  

  Написал Евгений
  24 Октябрь 2011 в 12:46 ответить

• Поставил после count = data; при отправке запроса. И все работает вроде корректно.
  Спасибо за замечательный скрипт!

  

  Написал Евгений
  24 Октябрь 2011 в 13:04 ответить

• Как вариант (не проверял ибо нет времени):

  $(/* 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/

  

  Написал sofcase
  24 Октябрь 2011 в 13:19 ответить

• Спасибо большое!

  

  Написал Евгений
  24 Октябрь 2011 в 21:25 ответить

• Еще можно привязывать обработчики к самому XHR объекту, вот ссылка на доку: http://api.jquery.com/jQuery.post/#jqxhr-object

  

  Написал sofcase
  24 Октябрь 2011 в 13:24 ответить

• А его обязательно добавлять в свой сайт или можно добавить к примеру для почтового ящика?
  И как его добавить? :)

  

  Написал Алексей
  4 Февраль 2012 в 19:10 ответить

• Да на сайт. В смысле к почтовому ящику?

  

  Написал sofcase
  4 Февраль 2012 в 20:12 ответить