Question

我喜欢stackoverflow中使用的通知栏。我找到了一个jQuery插件，只需几行就可以实现通知栏，但是这个插件似乎在需要时不会叠加多个通知栏。

有没有人知道更好的插件，或者如果有更多通知可用，如何让下面的插件叠加吧？

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

Answer 1

...
<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(); })

Answer 2

我知道你只关注酒吧插件，但我写了我的意见。想象一下，此栏中有2个以上的通知。它会增长，它可以填充比你想要的更多的空间。用户只会看到显示器的一半显示通知，而不是查看操作结果。）

如果您知道经常会及时收到多个通知，请尝试使用条形码通知。

我推荐jGrowl，这与OS X的工作方式类似。它简单，美观，可以及时准备好许多通知。

祝你好运。

Answer 3

我写了这篇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对象，它们就会自动堆叠。

堆叠通知栏

3 个答案: