可以关闭的jquery通知栏? [英] jquery notification bars that can be dismissed?
问题描述
我一直在寻找一个通知栏，就像本网站上的那个，显示在顶部通知用户更改等.它应该有被关闭的能力.我能找到的 jquery 就是 这个
有人有其他建议或建议吗?
构建您自己的方案非常容易.只需将其设为 标记下的第一个
#notify {位置:相对；宽度:100%；背景颜色:橙色；高度:50px；白颜色;显示:无；}然后在您的通知上，只需向下滑动即可:
$('#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();});});$(函数(){notify('您获得了 JQuery 徽章！');notify('你已经获得了 Super Awesome 徽章！');});功能通知(味精){$('<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屋！
