jquery通知栏可以被解雇吗？ [英] jquery notification bars that can be dismissed?
问题描述
我一直在寻找一个通知栏，就像本网站上的一个通知栏一样，该通知栏显示在顶部，通知用户更改等。它应该具有关闭的能力。我能找到的所有jquery都是这一个
有没有人有任何其他的建议或建议？
拥有。只需将它作为< body> 标记下的第一个< div> ，并将css设置为类似这：
#notify {
position：relative;
宽度：100％;
背景颜色：橙色;
height：50px;
颜色：白色;
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（）;}）;
}）;
$ b $（函数（）{
notify（'您已经赢得了JQuery徽章！'）;
notify（'您赢得了超级真棒徽章！'）;
}）;
函数notify（msg）{
$（'< div />'）。prependTo（'body'）。addClass（'notify'）。html（msg）.slideDown （）;
}
演示： http://jsfiddle.net/AlienWebguy/5hjPY/
I've been looking for a notification bar like the one on this site that displays at the top notifying a user of changes etc. It should have the ability of being closed. All I can find for jquery is this one
Does anyone have any other recommendations or suggestions?
Super easy to build your own. Just make it the first <div> under the <body> tag, and set the css to something like this:
#notify {
position:relative;
width:100%;
background-color:orange;
height:50px;
color:white;
display:none;
}
Then on your notifications, simply slide it down:
$('#notify').html('new message').slideDown();
And add a click event to close it and clear out the notification:
$('#notify').click(function(){
$(this).slideUp().empty();
});
Demo: http://jsfiddle.net/AlienWebguy/Azh4b/
If you wanted to really make it like StackOverflow's you'd simply set a cookie when you issue the notification, and then every page load show all notifications which have applicable cookies.
If you want multiple notifications, change #notify to .notify and stack em up. Something like this:
$('.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();
}
Demo: http://jsfiddle.net/AlienWebguy/5hjPY/
这篇关于jquery通知栏可以被解雇吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
