Pau*_*aul 12 html jquery notifications
我一直在寻找一个通知栏,就像这个站点上的通知栏,显示在顶部,通知用户有变化等.它应该具有关闭的能力.我能为jquery找到的就是这一个
有没有人有任何其他建议或建议?
Ali*_*guy 24
超级轻松建立自己的.只需将它作为标记<div>下的第一个<body>,并将css设置为如下所示:
#notify {
position:relative;
width:100%;
background-color:orange;
height:50px;
color:white;
display:none;
}
Run Code Online (Sandbox Code Playgroud)
然后在您的通知上,只需将其向下滑动:
$('#notify').html('new message').slideDown();
Run Code Online (Sandbox Code Playgroud)
并添加一个单击事件以关闭它并清除通知:
$('#notify').click(function(){
$(this).slideUp().empty();
});
Run Code Online (Sandbox Code Playgroud)
演示: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();
}
Run Code Online (Sandbox Code Playgroud)
演示:http://jsfiddle.net/AlienWebguy/5hjPY/
| 归档时间: |
|
| 查看次数: |
6630 次 |
| 最近记录: |