堆疊通知欄

我喜歡在stackoverflow中使用通知欄。我找到了一個jQuery插件，使通知欄可能只有幾行，但這個插件似乎並沒有在需要時堆疊多個通知欄。堆疊通知欄

有沒有人知道更好的插件或如何讓下面的插件堆棧酒吧更多的通知可用？

http://www.dmitri.me/blog/notify-bar/

2010-10-07 oshirowanen

... 
<body> 

    <div id="notificationArea"></div> 

    <!-- rest of your website --> 

</body> 
</html>

然後創建通知只是這樣做jQuery中：

$('#notificationArea').prepend('<div class="notification">This is my notification</div>');

它有點基本的，但這應該做的伎倆，因爲你是「前面加上」你會得到您正在尋找的堆疊。你也可以使用append()，但我假設你想要最近的通知。

獲得「X」（關閉）按鈕，只需要通知一類的notifcationClose一個鏈接，並做到：

$('.notificationClose').click(function(){ $('this').parents('.notification').remove(); })

來源

2010-10-07 10:49:10

我似乎無法得到關閉功能的工作。 – oshirowanen 2010-10-07 13:53:19

'$（'。notificationClose'）。click（function（）{$（'this'）。parent（）。remove（）;}）;'試試 - 鏈接必須是通知的直接派生物。 – 2010-10-07 14:26:48

我寫這段JavaScript代碼，不只是這一點。

// Show a message bar at the top of the screen to tell the user that something is going on. 
// hideAfterMS - Optional argument. When supplied it hides the bar after a set number of milliseconds. 
    function AdvancedMessageBar(hideAfterMS) { 
     // Add an element to the top of the page to hold all of these bars. 
     if ($('#barNotificationContainer').length == 0) 
     {    

     var barContainer = $('<div id="barNotificationContainer" style="width: 100%; margin: 0px; padding: 0px;"></div>'); 
     barContainer.prependTo('body'); 

     var barContainerFixed = $('<div id="barNotificationContainerFixed" style="width: 100%; position: fixed; top: 0; left: 0;"></div>'); 
     barContainerFixed.prependTo('body'); 
    } 

    this.barTopOfPage = $('<div style="margin: 0px; background: orange; width: 100%; text-align: center; display: none; font-size: 15px; font-weight: bold; border-bottom-style: solid; border-bottom-color: darkorange;"><table style="width: 100%; padding: 5px;" cellpadding="0" cellspacing="0"><tr><td style="width: 20%; font-size: 10px; font-weight: normal;" class="leftMessage" ></td><td style="width: 60%; text-align: center;" class="messageCell"></td><td class="rightMessage" style="width: 20%; font-size: 10px; font-weight: normal;"></td></tr></table></div>'); 
    this.barTopOfScreen = this.barTopOfPage.clone(); 

    this.barTopOfPage.css("background", "transparent"); 
    this.barTopOfPage.css("border-bottom-color", "transparent"); 
    this.barTopOfPage.css("color", "transparent"); 

    this.barTopOfPage.prependTo('#barNotificationContainer'); 
    this.barTopOfScreen.appendTo('#barNotificationContainerFixed'); 


    this.setBarColor = function (backgroundColor, borderColor) {  

     this.barTopOfScreen.css("background", backgroundColor); 
     this.barTopOfScreen.css("border-bottom-color", borderColor); 
    }; 

    // Sets the message in the center of the screen. 
    // leftMesage - optional 
    // rightMessage - optional 
    this.setMessage = function (message, leftMessage, rightMessage) { 
     this.barTopOfPage.find('.messageCell').html(message); 
     this.barTopOfPage.find('.leftMessage').html(leftMessage); 
     this.barTopOfPage.find('.rightMessage').html(rightMessage); 

     this.barTopOfScreen.find('.messageCell').html(message); 
     this.barTopOfScreen.find('.leftMessage').html(leftMessage); 
     this.barTopOfScreen.find('.rightMessage').html(rightMessage); 
    }; 


    this.show = function() { 
     this.barTopOfPage.slideDown(1000); 
     this.barTopOfScreen.slideDown(1000); 
    }; 

    this.hide = function() { 
     this.barTopOfPage.slideUp(1000); 
     this.barTopOfScreen.slideUp(1000); 
    }; 

    var self = this; 


    if (hideAfterMS != undefined) { 
     setTimeout(function() { self.hide(); }, hideAfterMS); 
    }  
}

要使用它，您必須使用jQuery，並確保頁面正文沒有邊距或填充。

AdvancedMessageBar採用的參數是可選的。如果提供，它會導致條在一定時間後以毫秒爲單位消失。

var mBar = new AdvancedMessageBar(10000); 
mBar.setMessage('This is my message', 'Left Message', 'Right Message'); 
mBar.show();

如果你想堆疊這些，那麼只需創建更多的AdvancedMessageBar對象，它們就會自動堆疊。

來源

2011-02-14 22:38:03

我知道你只是在尋找酒吧插件，但我寫我的意見。想象一下，您在此欄中有超過2個通知。它增長，它可以填滿比你想的更多的空間。而不是查看操作的結果，用戶只會看到只顯示監視器一半的通知:)

嘗試考慮使用欄通知，如果您知道您將經常有多個通知。我推薦jGrowl，它與OS X的工作方式類似。它很簡單，很好看，並準備好及時發送很多通知。

祝你好運。

來源

2011-02-14 23:03:34 kajo

回答

相關問題