Хороший плагин уведомлений для Jquery? - PullRequest
Новая
       22

Хороший плагин уведомлений для Jquery?

10 голосов
/ 12 июня 2010

Я смотрю на уведомления о соснах (http://pines.sourceforge.net/pnotify/) и выглядит хорошо, но, похоже, у них мало фактической документации, поэтому мне интересно, есть ли что-нибудь более устоявшееся и работавшее там?

Как будто я не хочу тратить время на то, чтобы понять, как использовать сосны, а затем выяснить, что в нем отсутствует какая-то функция, которая мне понадобилась несколько месяцев спустя, и которую мне нужно было заменить на другой плагин.

Это произошло со мной при использовании TableSorter 2.0, тогда я использовал его, но мне понадобилась фильтрация, но они вроде как засосали, поэтому я нашел таблицы данных, которые имели такой больший API и развивались больше.

Поэтому мне интересно, есть ли что-то вроде datatables (с точки зрения разработки и возможностей) только для уведомлений.

Редактировать

Так что я смотрю на jgrowl и немного путаюсь с тем, как использовать с ним ролик темы.

Поэтому я взял один из файлов с примерами и разобрал его со всем, что я считал ненужным. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" debug="true">
    <head>
        <title>jGrowl meet Twitter</title>
        <link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/>
        <link type="text/css" href="css/le-frog/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
        <script type="text/javascript">
            $(function(){
                $('.ui-state-default').hover(
                    function(){$(this).addClass('ui-state-hover');},
                    function(){$(this).removeClass('ui-state-hover');}
                )
                .mousedown(function(){$(this).addClass('ui-state-active');})
                .mouseup(function(){$(this).removeClass('ui-state-active');})
                .mouseout(function(){$(this).removeClass('ui-state-active');});
            });
        </script>

        <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript" src="../jquery-1.3.2.js"></script>
        <script type="text/javascript" src="../jquery.jgrowl.js"></script>
        <script type="text/javascript">

            $(document).ready(function(){
                // This value can be true, false or a function to be used as a callback when the closer is clciked
                $.jGrowl.defaults.closer = function() {
                    console.log("Closing everything!", this);
                };

                $.jGrowl("Sticky notification with a header", 
                    { 
                        header: 'A Header', 
                        sticky: true,
                    });
            });

        </script>
    </head>
    <body>
    <div id="trdevtool_contain" class="ui-widget ui-widget-content ui-corner-all">
        <div class="ui-widget-header ui-corner-top">
            <h1>jQuery UI ThemeRoller <span>Developer Tool</span></h1>
        </div>
    </div>

    </body>
</html>

Я не понимаю, что это за 

    <script type="text/javascript">
        $(function(){
            $('.ui-state-default').hover(
                function(){$(this).addClass('ui-state-hover');},
                function(){$(this).removeClass('ui-state-hover');}
            )
            .mousedown(function(){$(this).addClass('ui-state-active');})
            .mouseup(function(){$(this).removeClass('ui-state-active');})
            .mouseout(function(){$(this).removeClass('ui-state-active');});
        });
    </script>

Кажется, это не имеет ничего общего с применением тем. Я забрал это, и тема была все еще применена. Также, если вы посмотрите на мой JGROW 

$.jGrowl("Sticky notification with a header", 
    { 
        header: 'A Header', 
        sticky: true,
    });

Я не упоминаю тему, но она по-прежнему используется как тема. Почему это берет тему?

Ответы [ 4 ]

17 голосов
/ 20 июля 2012

Я бы хотел добавить свои 2цента, связавшись с моим любимым тостером.

http://codeseven.github.com/toastr/

9 голосов
/ 12 июня 2010

Есть связок из них, я бы зашел на сайт плагинов jQuery, в частности плагины, классифицированные в категории уведомлений :)

Вотвсего несколько:

1 голос
/ 21 августа 2011

Я могу опоздать с этим ответом, но если кто-нибудь придет сюда в поисках простого, легкого, минималистичного и ненавязчивого плагина для уведомлений, я создал плагин с открытым исходным кодом для jQuery-уведомлений, который можно без проблем интегрировать с веб-приложениями jNotifyOSD . Вы можете увидеть демо по этой ссылке. Я пытался сохранить API чистым и простым в использовании. Вот пример: 

$.notify_osd.create({
  'text'        : 'Hi!',             // notification message
  'icon'        : 'images/icon.png', // icon path, 48x48
  'sticky'      : false,             // if true, timeout is ignored
  'timeout'     : 6,                 // disappears after 6 seconds
  'dismissable' : true               // can be dismissed manually
});

Вы также можете установить глобальные значения по умолчанию для всех будущих уведомлений (может быть переопределено для каждого уведомления): 

$.notify_osd.setup({
  'icon'        : 'images/default.png',
  'sticky'      : false,
  'timeout'     : 8
});

Она включает в себя очень хорошую тему по умолчанию с прозрачностью при наведении (это означает, что уведомления становятся все более и более прозрачными при приближении указателя мыши), но тему можно очень легко изменить, просто вставив файл CSS, в котором указаны стили для некоторых определенные классы. Я работаю над тем, чтобы включить больше возможностей, поэтому вы должны следить за хранилищем GitHub .

ОБНОВЛЕНИЕ [13 декабря 2012] :

Прошло некоторое время, но я наконец-то реализовал поддержку нескольких видимых уведомлений, используя систему очередей. Так, например: 

$.notify_osd.setup({
  // ... config ...
  'visible_max' : 5                  // max 5 notifications visible simultaneously
  'spacing'     : 30                 // spacing between consecutive notifications
});

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

1 голос
/ 12 июня 2010

Лично я использую jGrowl.Но вот несколько других .

Редактировать: В ответ на комментарий ниже, вот jGrowl site .Что это делает лучше?Он прост в использовании и работает хорошо.Другие могут добиться того же, но мой опыт такой же, как и у Функи: попробовал, это сработало, это было легко, сделано.

...