10

我正在查看 pines notify( http://pines.sourceforge.net/pnotify/ )，它看起来不错，但似乎没有什么实际文档，所以我想知道那里有什么更确定和工作的吗？

就像我不想花时间试图弄清楚如何使用 pines，然后发现它缺少几个月后需要的一些功能，我需要更改为不同的插件。

这发生在我使用 tablesorter 2.0 时，我正在使用它，然后我需要过滤，但他们的有点糟糕，所以我发现数据表有这么大的 api 并开发了更多。

所以我想知道是否有类似数据表（在开发和功能方面）的东西只是用于通知。

编辑

所以我在看 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

4 回答 4

17

我想通过链接到我最喜欢的 toastr 来添加我的 2cents。

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

于 2012-07-20T17:26:42.563 回答
9

那里有很多这样的东西，我会查看 jQuery 插件网站，特别是归类为通知类别的插件:)

这里仅仅是少数：

于 2010-06-12T18:15:59.733 回答
1

我个人使用jGrowl。但这里有一些其他的。

编辑：为了回应下面的评论，这里是jGrowl 网站。它做什么更好？它易于使用，而且效果很好。其他人可以达到同样的效果，但我的经验与 Funka 的相同：尝试过，成功了，很容易，完成了。

于 2010-06-12T18:16:49.337 回答
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
});

你可以在这里看到一个演示。我认为该插件现在足够灵活，可以处理各种各样的用例。

于 2011-08-21T18:17:12.883 回答