代码之家 › 专栏 › 技术社区 › oshirowanen

堆叠通知栏

jquery-plugins jquery-ui jquery javascript

oshirowanen · 技术社区 · 14 年前

有没有人知道一个更好的插件,或者如何让插件下面的堆栈栏,因为更多的通知变得可用?

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

3 回复 | 直到 14 年前

Thomas Clayson 14 年前

...
<body>

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

  <!-- rest of your website -->

</body>
</html>

然后要创建通知,只需在jquery中执行以下操作:

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

这有点基本,但这应该做的诀窍,因为你是“准备”,你会得到你正在寻找的堆叠。你可以用 append() 我也这么认为,但我想你会希望最新的通知放在最上面。

notifcationClose 做:

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

Malice 13 年前

如果您知道经常会有多个通知及时发出,请尝试考虑使用条形通知。

我建议 jGrowl

祝你好运。

Paul Mendoza 14 年前

// 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);
    }    
}

AdvancedMessageBar采用的参数是可选的。如果提供,它将导致条在一定时间(毫秒)后消失。

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