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

    Об ошибка, предложениях пишите в комменты.
    Share post

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 35

      0
      Демо надо бы…
        +1
        Если подскажите куда выложить, с удовольствием…
          +3
          Вас сейчаc по традиции отправят в dropbox :)
        +6
        Вот такой же и круче плагин — pines.sourceforge.net/pnotify/
          0
          Видел этот плагин, в хроме ведет себя необычно… сообщения бывает не появляются пока их новыми не «протолкнешь». Время было 2 часа чтобы все было, разбираться с глюками времени не было, и был написан легкий и рабочий велосипед
            0
            Сейчас попробовал — в Опере не работает.
            • UFO just landed and posted this here
                0
                у меня со второй перезагрузки страницы заработал в 10.61
                  0
                  вот в опере не проверял, спасибо что сказали, разберусь почему — исправлю
                0
                Спасибо, будем использовать его в проекте.

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

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

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

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

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


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

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

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

                                      Only users with full accounts can post comments. Log in, please.