可以被解雇的jQuery通知栏？

我一直在寻找一个通知栏，就像本网站上的通知栏一样，它显示在顶部，通知用户更改等。它应该具有被关闭的能力。我所能找到的jquery是this one 可以被解雇的jQuery通知栏？

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

2011-09-18 Paul

这是真的* *容易。即使这个网站有一个！ – Blender

@Blender：“即使这个”听起来很简单，因为*即使* Stackoverflow也能运行。 –

本网站上的大部分内容都非常简单（并且编码明显）。 – Blender

超级容易建立自己的。只要将其作为第<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/

来源

2011-09-18 22:09:42 AlienWebguy

从来没有考虑建立我自己的...是有道理的。谢谢你，谢谢你的好例子:) – Paul

不客气，很高兴帮助:) – AlienWebguy