Укладка панелей уведомлений - PullRequest
Новая
       7

Укладка панелей уведомлений

3 голосов
/ 07 октября 2010

Мне нравятся панели уведомлений, используемые в stackoverflow.Я обнаружил плагин jQuery, который делает панель уведомлений возможной всего за несколько строк, но этот плагин, кажется, не складывает несколько панелей уведомлений при необходимости.Плагин ниже, чтобы складывать бары по мере появления новых уведомлений?

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

Ответы [ 3 ]

4 голосов
/ 07 октября 2010 
...
<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(); })
2 голосов
/ 15 февраля 2011

Я знаю, что вы ищете только барный плагин, но я пишу свое мнение. Представьте, что у вас есть более 2 уведомлений в этой панели. Он растет и может заполнить больше места, чем вы хотели бы. Вместо того, чтобы просматривать результаты действий, пользователь будет видеть только уведомления на половину дисплея монитора:)

Попробуйте рассмотреть возможность использования барных уведомлений, если вы знаете, что у вас часто будет более одного уведомления вовремя.

Я рекомендую jGrowl , что похоже на то, как в OS X работает. Это просто, красиво и готово ко многим уведомлениям вовремя.

удачи.

0 голосов
/ 15 февраля 2011

Я написал этот фрагмент 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, и они будут автоматически складываться.

...