JavaScript

индекс
246,38

jQuery плагин визуального стека сообщений

Стояла задача динамического визуального отображения реакции на действия пользователя со стороны системы.
Другими словами: изменилось какое-то состояние объекта — вывести сообщения об удачном завершении сохранения изменения в базе/системе.
Написание плагина не заставило себя ждать...
 
Пример использования, который показывает функционал плагина:
$('#save').click(function () {
      var msgObj = $.notify.add("Начало сохранения", 3);
      //Выводим сообщение о начале действий (продолжительностью 3 сек) и сохраняем ссылку на сообщение в msgObj
      $.get('test.txt', function (result) {
        if (result.ok) { //если все выполнилось удачно
          $.notify.remove(msgObj, 0.5);
          //удаляем предыдущее сообщение через 0,5 сек, вдруг все сохранилось быстрее чем мы думали
          $.notify.add("Сохранение выполнено успешно", 1);
          //и добавляем новое в стек сообщений
        } else { //если произошла ошибка
          $.notify.remove(msgObj, 0.5);
          //удаляем предыдущее сообщение через 0,5 сек, вдруг все сломалось быстрее чем мы думали
          $.notify.add("Ошибка сохранения", 'error', 3);
          //выводим сообщение "необычного" оформления (css класс error) на 3 сек
        }
      }, "json");
    });


* This source code was highlighted with Source Code Highlighter.

Скачать jquery.notify.js

Об ошибка, предложениях пишите в комменты.
+36
1 сентября 2010, 23:04
166

комментарии (35)

0
CrashMax #
Демо надо бы…
+1
freeart #
Если подскажите куда выложить, с удовольствием…
+3
aavezel #
Вас сейчаc по традиции отправят в dropbox :)
+6
aleks_raiden #
Вот такой же и круче плагин — pines.sourceforge.net/pnotify/
0
freeart #
Видел этот плагин, в хроме ведет себя необычно… сообщения бывает не появляются пока их новыми не «протолкнешь». Время было 2 часа чтобы все было, разбираться с глюками времени не было, и был написан легкий и рабочий велосипед
0
fog #
Сейчас попробовал — в Опере не работает.
0
valmont #
так и есть, не пашет. v10.70.3488
0
whtiger #
у меня со второй перезагрузки страницы заработал в 10.61
0
freeart #
вот в опере не проверял, спасибо что сказали, разберусь почему — исправлю
0
png #
Спасибо, будем использовать его в проекте.

Наш тестер нашел баг, в ff5 не работает Notice with Callbacks.
Он думает, что это реклама, и предлагает забанить. Причем постоянно…
в хроме та же история на этот же пример.

другой функционал нормально работает.
+2
MagaSoft #
>$.notify.add(«Ошибка сохранения», { 'background-color': '#FF4242', 'border': '1px solid darkred' }, 3);

Рекомендую использовать классы вместо указания css свойств. Будет и проще, т.к. кол-во видов сообщений чаще всего ограничено и имеет спец. дизайн, и быстрее, т.к. addClass/removeClass работает быстрее.
+1
freeart #
согласен с замечанием, думаю так и сделаю
0
Ag47 #
Я сам за классы в большинстве случаев, но знать это не помешает

+4
dfuse #
Для такой простой операции, как лог, я использую вот что:

var debug = function(html) {
$('#debug').append($("").html(html).delay(5000).slideUp());
}


Подразумевается, что есть абсолютный UL#debug, в котором прописаны стили для LI, чтобы каждый был отдельным блоком (визуально).
+2
dfuse #
Парсер съел теги…

var debug = function(html) {
$('#debug').append($("<li></li>").html(html).delay(5000).slideUp());
}
0
DEViANCE #
$("<li></li>") можно сократить до $("<li/>")
+1
dfuse #
Можно. Но я предпочитаю парные теги писать именно как парные.
0
HDg #
давно заприметил pnotify для проекта, но попробую ваш велосипед. он на первый взгляд проще, делает что надо. а дальше того и гляди еще чего-то прикрутите ;)
спасибо!
0
freeart #
Спасибо вам, если будут замечания/предложения пишите. Были мысли добавить кнопку «закрыть» и в случае ошибки «повторить операцию»
0
HDg #
хорошая мысля, если кнопка Закрыть опциональной будет
0
TiKo #
Есть ли в Вашем плагине сообщения об ошибке, которые выделяются цветом? Или по крайней мере удобно ли донатсроить это? Например сообщение об успехе — один цвет, а ошибка — красный, предупреждение — желтый и т.п.
Собственно как на хабре реализовано…
Очень не хватает демки… Тоже использую pines.sourceforge.net/pnotify/, но он кажется тяжеловесным, и не знал, что он в хроме как-то не так себя ведет, надо будет проверить…
0
TiKo #
Прошу прощения, невнимательно просмотрел приведенный код…
//выводим сообщение «необычного» оформления на 3 сек
думаю, это как раз и есть сообщение об ошибке…
Да, было бы удобнее просто прикрутить классы сообщений…
0
freeart #
уже прикрутил, в статье пример просто еще не поправил
+7
makis #
0
freeart #
ситуация в хроме тоже не однозначна, например кнопка «close all» не работает… да и вес не маленький
0
zloydey #
Немного оффтоп.

Подобный стек для ExtJS: dev.sencha.com/deploy/dev/examples/menu/actions.html
Только гифы надо в пнг конвертнуть.
+6
akzhan #
посмотрите на всякие jQuery Growl, большинство умеют то, что вам надо.
0
freeart #
выше я написал что не мог найти то что требовалось, а времени на решение было не больше 2-х часов…
0
emposha #
Вот еще один интересный вариант humanMsg + Демо
0
freeart #
немного не то — новое сообщение перетирает старое, а лог внизу где все сообщения не удобен — я не сразу понял что он кликабельный
0
sofcase #
Делал кое-что похожее не давно :)
sofcase.net/post/make-plugin-on-jquery-for-shows-hintmessages/
0
freeart #
Вполне неплохой вариант, я бы сказал тоже самое что у меня. Увидел бы его раньше, не писал бы свой — я думаю как здоровая конкуренция мой плагин, раз уж написан — имеет право на жизнь)
0
Garg0t #
Если несколько сообщений разного типа накликать, стек сообщений перестает очищаться. Это баг или фича?
0
sofcase #
Сообщениям задаёться таймер, смотри статью внимательней :) Обычное сообщение живет 3 секунды, остальным я передею значение 0, что равносильно — никогда не скрывать (только по клику юзера)!
0
noRerih #
Как уже сказали, поиск по jquery growl много чего выдаёт. От себя добавлю, что использовал… achtung :) его возможностей вполне хватает, проблем в использовании не было.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.