Good Notification Plugin For Jquery?

问题

I am looking at pines notify(http://pines.sourceforge.net/pnotify/) and it looks good but it seems to have little actual documentation so I am wondering is there anything more established and worked on out there?

Like I don't want to spend time trying to figure out how to use pines and then find out it is missing some feature that I needed a few months later that I needed to change to a different plugin.

This happened to me with tablesorter 2.0 I was using it then I needed the filtering but theirs kinda sucked so I found datatables what had such a bigger api and developed more.

So I am wondering if there is something like datatables(in terms of development and features) just for notifications instead.

Edit

So I am looking at jgrowl and kinda confused with how to use the theme roller with it.

So I took once of the example files and stripped it down with everything I thought was junk.

<!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>

I don't understand what this is for

    <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>

It seems to have nothing to do with applying the themes. I took it away and the theme was still applied. Also if you look at my jgrow

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

I make no mention of theme yet it still some how used the theme. Why is it taking the theme?

回答1:

There are bunches of these out there, I'd checkout the jQuery plugins site, specifically the plugins classified under the notification category :)

Here are just a few:

noty
notifyjs
jGrowl
toastr
jBar

回答2:

I'd like to add my 2cents by linking to my favourite, toastr.

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

回答3:

Personally I use jGrowl. But here are a few others.

Edit: In response to the comment below, here's the jGrowl site. What does it do better? It's easy to use, and it works well. The others can achieve the same thing, but my experience is the same as Funka's: tried it, it worked, it was easy, done.

回答4:

I might be late with this answer, but if anybody comes here looking for a simple, light, minimalist, and unobtrusive notification plugin, I've made an open source jQuery notification plugin that can be integrated seamlessly with web apps, called jNotifyOSD. You can see a demo on that link. I've tried to keep the API clean and dead simple to use. Here's an example:

$.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
});

You can also set global defaults for all future notifications (can be overridden on a per-notification basis):

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

It includes a very nice default theme with transparency on hover (meaning that notifications get more and more translucent as the mouse pointer approaches), but the theme can be changed very easily just by putting in a CSS file which specifies styles for some defined classes. I'm working to include more features, so you should keep an eye on the GitHub repository.

UPDATE [13th Dec, 2012]:

It's been some time, but I've finally implemented support for multiple visible notifications using a queue system. So for example:

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

You can see a demo here. I think the plugin is now flexible enough to handle a good variety of use-cases.

来源：https://stackoverflow.com/questions/3029640/good-notification-plugin-for-jquery

标签

jquery

jquery-plugins

toastr