Question

我一直在寻找一个通知栏，就像本网站上的通知栏一样，在顶部显示通知用户的更改等。它应该具有关闭的能力。我能为jquery找到的只有this one

有没有人有任何其他建议或建议？

Answer 1

超级轻松建立自己的。只需将其设为<div>标记下的第一个<body>，并将css设置为以下内容：

#notify {
    position:relative;
    width:100%;
    background-color:orange;
    height:50px;
    color:white;
    display:none;
}

然后在您的通知上，只需将其向下滑动：

$('#notify').html('new message').slideDown();

添加点击事件以关闭它并清除通知：

$('#notify').click(function(){
    $(this).slideUp().empty();
});

演示：http://jsfiddle.net/AlienWebguy/Azh4b/

如果您想真正使其像StackOverflow一样，您只需在发出通知时设置cookie，然后每个页面加载显示所有具有适用cookie的通知。

如果您需要多次通知，请将#notify更改为.notify并将其叠加。像这样：

$('.notify').live('click',function() {
    $(this).slideUp('fast',function(){$(this).remove();});
});

$(function(){
    notify('You have earned the JQuery badge!');
    notify('You have earned the Super Awesome badge!');
});

function notify(msg) {
    $('<div/>').prependTo('body').addClass('notify').html(msg).slideDown();
}

演示：http://jsfiddle.net/AlienWebguy/5hjPY/

Answer 2

我实际上为我的几个项目做了一些非常相似的事情。

sa JSFiddle demo，它有效，但它可以从我的个人库中直接升级 - 代码可能会使用清洁和优化，但它给人的印象很好。< / p>

我的代码的额外好处是它没有显示重复的项目 - 它＆＃34; ping＆＃34;现有的一个。点击通知上的任意位置即可关闭它。

我能看到的唯一缺点是它掩盖了一些主要内容，但如果您使用position: static将通知容器放在内容的顶部，则可以修复此问题。

如果您有任何具体要求我解释，请告诉我。在一个答案中可以运行很多代码。

我可能会编写一个jQuery插件，在某些时候执行此操作，因为它只有一个例子。我会在这里发布它。

NB。 setInterval()仅用于演示目的。此外，还有不同的彩色警报（成功，信息，警告，错误 - 分别为绿色，蓝色，橙色和红色）。

Answer 3

你可能想试试“noty” https://github.com/needim/noty

可以解散的jquery通知栏？

3 个答案: