31.12.2011 20:07:37: С новым годом!

Плагины для jQuery: Сообщения

Что тут есть?

Данный плагин сделан для замены стандартных alert и confirm.
Основные возможности:
  • В тексте сообщения можно использовать HTML.
  • Для большого текста будет включен скроллинг.
  • Можно создать любой набор кнопок.
  • Можно задать время автоскрытия сообщения.
  • Можно задать обработчик закрытия сообщения по-умолчанию.
  • Изменяемый стиль сообщения.
  • Показ сообщений и запросов без блокировки всего окна.

Попробовать прямо сейчас

Текст Время показа
Стиль
HTML элемент
HTML элемент для вывода в сообщении

при клике на этом элементе он не исчезнет так как обработчик
onmouseup запрещает прохождение события до DmNotify
 Кнопки
Событие onDefault

Как использовать

Пример вызова: 
// Полный вариант:
$.DmNotify({
	// Текст сообщения
	html:		'Текст',
	// Кнопки, можно не указывать
	keys:		{
					// Коллекция кнопок - объект, у которого
					// имя свойства - текст на кнопке
					'Имя кнопки':
					// значение этого свойства - обработчик нажатия
					function()
					{
						alert('Обработчик кнопки');
					}
				}, 
	// Время показа сообщения, можно не указывать:
	// = null - время показа по-умолчанию (5 сек)
	// = -1   - нет автоскрытия
	// >0     - время показа в миллисекундах
	timeout:	4000,
	// Стиль панели сообщения, можно не указывать.
	// Если стиль не указан, то у панели прописывается CSS класс 'notify',
	// если стиль указан, то у панели CSS класс будет прописан так: 'notify указанный_стиль'
	css:		'warning',
	// Обработчик события закрытия сообщения без нажатия на кнопку, если нажали на кнопку, то событие не вызовится,
	// так же обработчик не будет вызван, если сообщение вытесняется следующим сообщением
	ondefault:	function()
				{
					alert('ondefault');
				}
});
// Сокращенный вариант:
$.DmNotify('Текст');

Настройка отображения

Такая структура создается для показа сообщений: 
<div class="notify" style="opacity: 1; top: -100000px; ">
	<div class="content">
		<div class="contentbg">
			<div class="text"><!--Тут будет вставлен HTML--></div>
			<div class="buttons" style="display: block; ">
				<span class="hint"><!-- Текст, установленный через $.DmNotify.hint(...) будет отображен здесь --></span>
				<span class="ttl" title="Сообщение будет скрыто через указанное время"></span>
				<!--Тут будут показаны кнопки--><button>Текст</button>
			</div>
		</div>
	</div>
</div>
Текущий CSS для сообщений: 
/* Основной элемент, он имеет абсолютное позиционирование */
.notify
{
	background:		transparent url(../img/nbgr.png) no-repeat right bottom;
	padding:		0px 8px 0px 0px;
	margin-top:		-10px;
	left:			25%;
	width:			50%;
	position:		fixed;
	z-index:			200;
}
/* В этом элементе располагатся элемент с содержимым */
.notify .contentbg
{
	background:		transparent url(../img/nbg.png) left bottom;
}
/* В этом элементе располагаются текст и кнопки */
.notify .content
{
	background:		transparent url(../img/nbgl.png) no-repeat left bottom;
	padding:		0px 0px 8px 8px;
}
/* В этом элементе располагается текст */
.notify .text
{
	padding:		18px 8px 8px 8px;
	font-size:		13pt;
	font-weight:	bold;
	text-align:		center;
}
/* В этом элементе располагаются кнопки */
.notify .buttons
{
	background:		transparent url(../img/bg7-5.png) no-repeat center top;
	vertical-align:	middle;
	text-align:		right;
	padding:		4px;
}
/* В этом элементе располагается счетчик времени до закрытия сообщения */
.notify .ttl
{
	padding:		0px;
	font-weight:	bold;
	display:		inline-block;
	font-size:		10pt;
	margin:			-2px 8px -2px 0px;
}
/* Стиль кнопок сообщения */
.notify BUTTON
{
	font-weight:	bold;
	min-width:		80px;
	cursor:			pointer;
	margin-left:	2px;
	padding:		1px;
	height:			24px;
}

/* Расширенные стили сообщения: красный и синий */
.notify.red .contentbg	{ background-image: url(../img/nbg-r.png); }
.notify.blue .contentbg	{ background-image: url(../img/nbg-b.png); }

Как зафиксировать сообщение вверху окна.

Самое простое: style="position: fixed", но это не работает в IE<7 (на них тратить время не хочу, поэтому использую fixed), но можно применить следующий подход: 
<html>
	<head>
		<style type="text/css">
			BODY
			{
				width:		100%;
				height:		100%;
				overflow:	hidden; /* У BODY убираем скроллинг */
				padding:	0px;
				margin:		0px;
			}
			#content
			{
				width:		100%;
				height:		100%;
				position:	relative;
				overflow:	auto; /* У элемента с основным содержимым включаем скроллинг */
			}
			.notify
			{
				position:	absolute;
				z-index:		200;
			}
		</style>
	</head>
	<body>
		<!-- На это место будет добавлен тэг для DmNotify и он сколироваться не будет -->
		<div id="content">
			Тут прокручиваемая часть страницы
		</div>
	</body>
</html>
Идея простая - отключаем скроллинг у BODY, таким образом все элементы будут зафиксированы на месте, основное содержимое, которое должно скроллироваться, помещаем в отдельный элемент и у этого элемента включаем скроллинг.
Проверено в браузерах: IE7, Safari 3.01 (Win), FireFox 2, FireFox 3, Google Chrome

Получить версию

Скачать исходный код, упакованная версия (Просмотров: 4441, Скачано JScript: 59 JScript.Packed: 36).

Версии

Версия Описание
1.0
16.02.2009		 Первая публикация.
1.1
16.09.2009		 Добавлено событие onDefault, оптимизировано создание кнопок, добавлен скроллинг большого содержимого.
1.2
24.10.2009		 Добавлен вывод времени до закрытия сообщения, и еще - если мышь на сообщении и подошло время закрытия, то сообщение не скрывается.
1.3
04.02.2010		 Добавлена возможность помимо текста передавать любой jQuery объект или HTML элемент для показа в DmNotify.
1.4
13.07.2010		 Счетчик до закрытия сообщения, пока мышь на сообщении, не считает время до закрытия.
1.5
12.09.2011		 Добавлен метод $.DmNotify.hint(...) для отображения дополнительных сообщений, введен элемент contentbg для облегчения накладывания стилей, проверена совместимость с jQuery 1.6.4.
Есть идеи, замечания?

Небольшое дополнение

Иногда мне присылают сообщения о том, что этот плагин не работает в IE6, однако вот:
Работа плагина в IE6
Если у вас он таки не работает - пришлите мне кусок HTML и JScript, то бы разбираться предметно.
SpyLOG