堆叠通知栏

我喜欢在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

回答

相关问题