Jquery 的好通知插件？ [关闭]
Posted
技术标签:
【中文标题】Jquery 的好通知插件？ [关闭]【英文标题】：Good Notification Plugin For Jquery? [closed] 【发布时间】：2011-03-03 01:26:12 【问题描述】：我正在查看 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,
);
我没有提到主题，但它仍然有些如何使用主题。为什么要取主题？
【问题讨论】：
【参考方案1】：我想通过链接到我最喜欢的 toastr 来增加我的 2cents。
http://codeseven.github.com/toastr/
【讨论】：
我认为在阅读此答案后我花了 5 分钟时间下载、更新我的网页并查看通知完全按照我的意愿工作。所以在 2016 年 +1 我使用了toastr，但还有两个来检查 1.pnotify 2.Bootstrap Alert using NotifyJs【参考方案2】：
那里有 一堆，我会查看 jQuery 插件网站，特别是 the plugins classified under the notification category :)
这里只是一些：
noty notifyjs jGrowl toastr jBar【讨论】：
是的，我看到一堆我想弄清楚哪一个是最常用的和开发中最多的。 @chobo2 - 它们都有略微不同的样式/风格，选择最适合您的站点和所需功能集的我会说（例如，您需要排队吗？），它们都非常轻量级 here 是您为 show notfcation messages top of page 写的另一个答案【参考方案3】：我个人使用 jGrowl。但是here are a few others。
编辑：为了回应下面的评论，这里是jGrowl site。它做什么更好？它易于使用，而且效果很好。其他人可以达到同样的效果，但我的经验与 Funka 的相同：尝试过，成功了，很简单，完成了。
【讨论】：
是的，我看到了，但我找不到主页。它在哪些方面做得更好？ 我最近在一个项目中使用了jGrowl；我没有太多时间环顾四周，这是我找到的第一个，但它很容易设置，而且运行速度很快，我不需要再看下去了。 嗯，我正在看 jGrowl，但我想知道（这可能适用于所有人）。用ajax填充它们的最佳方法是什么？就像我要从服务器发送消息并希望那些在通知中弹出一样。如何最好地发送它，然后如何填充通知？ 你能否解释一下我是如何使用主题滚轮的。查看我的编辑。 只需在 $.ajax() 调用的成功回调中调用 $.jGrowl('your_message')。【参考方案4】：我可能迟到了这个答案，但如果有人来这里寻找一个简单、轻量、极简且不引人注目的通知插件，我制作了一个开源 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 文件，就可以很容易地更改主题定义的类。我正在努力添加更多功能，因此您应该关注the GitHub repository。
更新 [2012 年 12 月 13 日]：
已经有一段时间了，但我终于使用队列系统实现了对多个可见通知的支持。比如：
$.notify_osd.setup(
// ... config ...
'visible_max' : 5 // max 5 notifications visible simultaneously
'spacing' : 30 // spacing between consecutive notifications
);
你可以看到一个演示here。我认为该插件现在足够灵活，可以处理各种各样的用例。
【讨论】：
以上是关于Jquery 的好通知插件？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章