我一直在寻找一个通知栏,就像本网站上的通知栏一样,它显示在顶部,通知用户更改等。它应该具有被关闭的能力。我所能找到的jquery是this one可以被解雇的jQuery通知栏?
有没有人有任何其他的建议或建议?
我一直在寻找一个通知栏,就像本网站上的通知栏一样,它显示在顶部,通知用户更改等。它应该具有被关闭的能力。我所能找到的jquery是this one可以被解雇的jQuery通知栏?
有没有人有任何其他的建议或建议?
超级容易建立自己的。只要将其作为第<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();
}
从来没有考虑建立我自己的...是有道理的。谢谢你,谢谢你的好例子:) – Paul
不客气,很高兴帮助:) – AlienWebguy
我已经为我的几个项目做了一些非常类似的事情。
有一个JSFiddle demo,它可以工作,但它可以从我的个人库中直接获取 - 可能使用清理和优化的代码,但它对它的工作原理给予了很好的印象。
我的代码额外的好处是它不显示重复的项目 - 它“ping”现有的项目。点击通知上的任何地方关闭它。
我可以看到的唯一缺点是它覆盖了一些主要内容,但如果您将通知容器放在position: static
的内容顶部,那么这是可以修复的。
请让我知道是否有任何细节你想让我解释;在一个答案中有相当多的代码需要运行。
我可能会写一个jQuery插件,在某些时候这样做,看到只有一个例子。我会在这里发布它。
NB。 setInterval()
仅用于演示目的。此外,还有不同的彩色警报(成功,信息,警告,错误 - 分别为绿色,蓝色,橙色和红色)。
你可能想尝试 “noty” https://github.com/needim/noty
这是真的* *容易。即使这个网站有一个! – Blender
@Blender:“即使这个”听起来很简单,因为*即使* Stackoverflow也能运行。 –
本网站上的大部分内容都非常简单(并且编码明显)。 – Blender