Плагины для jQuery: Сообщения
Что тут есть?
Данный плагин сделан для замены стандартных alert и confirm.
Основные возможности:
- В тексте сообщения можно использовать HTML.
- Для большого текста будет включен скроллинг.
- Можно создать любой набор кнопок.
- Можно задать время автоскрытия сообщения.
- Можно задать обработчик закрытия сообщения по-умолчанию.
- Изменяемый стиль сообщения.
- Показ сообщений и запросов без блокировки всего окна.
Попробовать прямо сейчас
Как использовать
Пример вызова:
// Полный вариант:
$.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
Версии
| Версия |
Описание |
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, однако вот:
Если у вас он таки не работает - пришлите мне кусок HTML и JScript, то бы разбираться предметно.