logo标签列表

好用的Jquery通知插件？

jqueryjquery-pluginstoastr
10

我正在查看 pines notify（http://pines.sourceforge.net/pnotify/），它看起来不错，但似乎没有实际文档，因此我想知道是否有更为成熟且受到关注的替代品？

就像我不想花时间尝试使用 pines，然后发现几个月后需要的某些功能缺失，而需要将其更改为其他插件。

这在 tablesorter 2.0 上发生过，我一开始在使用它，但是后来我需要筛选功能，但他们的实现有点差，所以我找到了 datatables，它具有更大的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
我认为在阅读这个答案后，我花了5分钟时间下载、更新我的网页并看到通知正如我所期望的那样工作。因此，在2016年加1。 - Charles L.
我使用了 toastr，但还有两个选项需要检查：1. pnotify 2. Bootstrap Alert using NotifyJs。 - Shaiju T
9
我看到了很多，我正在努力找出哪一个是最常用和最活跃开发的。 - chobo2
2
@chobo2 - 它们都有稍微不同的风格/特点，选择最适合您的网站和所需功能集的即可（例如，您需要排队吗？），它们都非常轻量级。 - Nick Craver
这里是你写的另一个答案，用于在页面顶部显示通知消息。 - Shaiju T
1

我可能回答晚了，但如果有人在这里寻找一个简单、轻量级、极简和不显眼的通知插件，我已经制作了一个开源的jQuery通知插件，可以与Web应用程序无缝集成，名为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存储库。

更新[2012年12月13日]：

已经过了一段时间，但我终于实现了使用队列系统支持多个可见通知的功能。例如：

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

你可以在这里看到一个演示链接。我认为插件现在已经足够灵活，可以处理各种用例。
1

个人我使用jGrowl。但是这里还有其他几个。

编辑：回应下面的评论，这是jGrowl网站。它做得更好在哪里？它易于使用，而且效果很好。其他工具也可以实现相同的功能，但我的经验与Funka的一样：尝试了它，它起作用了，而且很容易上手，完成了。

是的，我看到了，但我找不到它们的主页。它有什么更好的功能？ - chobo2
我最近在一个项目中使用了jGrowl；我没有太多时间去寻找，它是我发现的第一个，但是它非常容易设置和快速运行，所以我不需要再去寻找其他的了。 - Funka
嗯，我正在研究jGrowl，但我想知道（这可能适用于所有通知插件）。最佳的ajax填充方式是什么？就像我将从服务器发送消息并希望它们弹出在通知中一样。如何最好地发送它，然后如何填充通知？ - chobo2
你能否解释一下我如何在这个主题滚动器中使用它。请看我的编辑。 - chobo2
在您的 $.ajax() 调用的成功回调函数中，只需调用 $.jGrowl('your_message') 即可。 - Ken Redler
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接