可以被解僱的jQuery通知欄？

我一直在尋找一個通知欄，就像本網站上的通知欄一樣，它顯示在頂部，通知用戶更改等。它應該具有被關閉的能力。我所能找到的jquery是this one 可以被解僱的jQuery通知欄？

有沒有人有任何其他的建議或建議？

2011-09-18 Paul

這是真的* *容易。即使這個網站有一個！ – Blender

@Blender：「即使這個」聽起來很簡單，因爲*即使* Stackoverflow也能運行。 –

本網站上的大部分內容都非常簡單（並且編碼明顯）。 – Blender

超級容易建立自己的。只要將其作爲第<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(); 
}

演示：http://jsfiddle.net/AlienWebguy/5hjPY/

來源

2011-09-18 22:09:42 AlienWebguy

從來沒有考慮建立我自己的...是有道理的。謝謝你，謝謝你的好例子:) – Paul

不客氣，很高興幫助:) – AlienWebguy