logo标签列表

堆叠式通知栏

javascriptjqueryjquery-uijquery-plugins
3
我喜欢stackoverflow中使用的通知栏。我找到了一个jQuery插件，只需几行代码就可以实现通知栏，但是这个插件似乎不能在需要时堆叠多个通知栏。
有人知道更好的插件或如何使下面的插件在可用的更多通知时堆叠栏吗？ http://www.dmitri.me/blog/notify-bar/
3个回答
4
...
<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(); })
$('.notificationClose').click(function(){ $('this').parent().remove(); }); 尝试一下 - 链接必须是通知的直接子元素。 - Thomas Clayson
2
我知道你只是在寻找酒吧插件，但我想发表一下我的意见。想象一下，如果这个栏里有超过2个通知，它会变得越来越大，可能会占据比你想要的更多的空间。用户只能看到屏幕的一半的通知，而无法查看操作结果。

如果你知道时间经常会有多个通知，请考虑使用栏式通知。

我推荐使用类似于OS X的jGrowl。它简单好看，可以处理多条通知。

祝你好运。

0

我写了这段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，并确保页面的body没有边距或填充。
AdvancedMessageBar所需的参数是可选的。如果提供了参数，则会在指定的毫秒数后使工具栏消失。
var mBar = new AdvancedMessageBar(10000);
mBar.setMessage('This is my message', 'Left Message', 'Right Message');
mBar.show();

如果您想要堆叠它们，只需创建更多的AdvancedMessageBar对象，它们将自动堆叠。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接