可以解散的jquery通知栏?

Pau*_*aul 12 html jquery notifications

我一直在寻找一个通知栏,就像这个站点上的通知栏,显示在顶部,通知用户有变化等.它应该具有关闭的能力.我能为jquery找到的就是这一个

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

Ali*_*guy 24

超级轻松建立自己的.只需将它作为标记<div>下的第一个<body>,并将css设置为如下所示:

#notify {
    position:relative;
    width:100%;
    background-color:orange;
    height:50px;
    color:white;
    display:none;
}
Run Code Online (Sandbox Code Playgroud)

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

$('#notify').html('new message').slideDown();
Run Code Online (Sandbox Code Playgroud)

并添加一个单击事件以关闭它并清除通知:

$('#notify').click(function(){
    $(this).slideUp().empty();
});
Run Code Online (Sandbox Code Playgroud)

演示: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();
}
Run Code Online (Sandbox Code Playgroud)

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