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屋!