Подтвердить что ты не робот

Панель уведомлений, аналогичная панели stackoverflow

Помните маленький div, который отображается вверху страницы, чтобы уведомить нас о вещах (например, о новых значках)?

Я хотел бы реализовать что-то подобное, и я ищу некоторые лучшие практики или шаблоны.

Мой сайт - это приложение ASP.NET MVC. В идеале ответы будут включать такие особенности, как "поместить это на главную страницу" и "сделать это в контроллерах".

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

<div class="notify" style="">
  <span>
    First time at Stack Overflow? Check out the
    <a href="/messages/mark-as-read?returnurl=%2ffaq">FAQ</a>!
  </span>
  <a class="close-notify" onclick="notify.close(true)" title="dismiss this notification">×</a>
</div>

<script type="text/javascript">

  $().ready(function() {
    notify.show();
  });

</script>

Я хотел бы добавить, что я это прекрасно понимаю и также понимаю участие jquery. Мне просто интересно, кто помещает код в разметку и когда ( "кто", как в каких объектах в приложении ASP.NET MVC).

Спасибо!

4b9b3361

ОТВЕТЫ

Ответ 1

После короткого отслеживания кода, вот догадка:

Следующий контейнер уведомлений всегда находится в разметке вида:

<div id="notify-container"> </div>

Этот контейнер уведомлений по умолчанию скрыт и заполняется javascript при определенных обстоятельствах. Он может содержать любое количество сообщений.

Если пользователь не вошел в систему

Стойкость: Cookies используются, чтобы отслеживать, отображается ли сообщение или нет.

Сгенерированный на стороне сервера код в представлении: Я думаю, что stackoverflow показывает только одно сообщение, если вы не вошли в систему. Следующий код вводится в представление:

<script type="text/javascript">
    $(function() { notify.showFirstTime(); });
</script>

Метод javascript showFirstTime() просто определяет, показывать ли это "Это ваш первый раз здесь?" сообщение, основанное на том, установлено ли cookie или нет. Если файл cookie отсутствует, отображается сообщение. Если пользователь принимает меры, cookie устанавливается, и сообщение не будет отображаться в будущем. Функция nofity.showFirstTime() обрабатывает файл cookie.

Если пользователь зарегистрирован

Стойкость: база данных используется для отслеживания того, было ли сообщение показано или нет.

Сгенерированный на стороне сервера код в представлении: Когда запрашивается страница, код на стороне сервера проверяет базу данных, чтобы увидеть, какие сообщения нужно отображать. Код на стороне сервера затем вводит сообщения в формате json в представление и помещает вызов javascript в showMessages().

Например, если я зарегистрирован в представлении, я вижу следующее в разметке в SO:

    <script type="text/javascript">
1
2 var msgArray = [{"id":49611,"messageTypeId":8,"text":"Welcome to Super User! Visit your \u003ca href=\"/users/00000?tab=accounts\"\u003eaccounts tab\u003c/a\u003e to associate with our other websites!","userId":00000,"showProfile":false}];
3 $(function() { notify.showMessages(msgArray); });
4
</script>

Таким образом, код на стороне сервера либо вводит код для вызова метода showFirstTime, если пользователь не вошел в систему, либо вводит сообщения и вызывает "showMessages" для зарегистрированного пользователя.

Подробнее о клиентском коде

Другим ключевым компонентом является "уведомляющий" JavaScript-модуль, который был отключен Picflight (вы можете сделать то же самое с помощью yslow для firebug). Модуль notify обрабатывает заполнение блока уведомлений на основе созданного на стороне сервера javascript.

Не авторизовано, клиентская сторона

Если пользователь не вошел в систему, тогда модуль обрабатывает события, когда пользователь X выдает уведомление или переходит в FAQ, создавая файл cookie. Он также определяет, показывать ли первое сообщение, проверяя наличие файла cookie.

Записан, клиентская сторона

Если пользователь вошел в систему, модуль уведомления добавляет все сообщения, сгенерированные сервером, в div уведомления. Он также, скорее всего, использует ajax для обновления базы данных, когда пользователь отклоняет сообщение.

Ответ 2

Этот ответ имеет полное решение.

Copy-вставка:

Это разметка, изначально скрытая, чтобы мы могли ее угасить:

<div id='message' style="display: none;">
    <span>Hey, This is my Message.</span>
    <a href="#" class="close-notify">X</a>
</div>

Вот применяемые стили:

#message {
    font-family:Arial,Helvetica,sans-serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:bold;
    font-size:100%;
    color:white;
    padding:10px 0px 10px 0px;
    background-color:#8E1609;
}

#message span {
    text-align: center;
    width: 95%;
    float:left;
}

.close-notify {
    white-space: nowrap;
    float:right;
    margin-right:10px;
    color:#fff;
    text-decoration:none;
    border:2px #fff solid;
    padding-left:3px;
    padding-right:3px
}

.close-notify a {
    color: #fff;
}

И это javascript (с помощью jQuery):

$(document).ready(function() {
    $("#message").fadeIn("slow");
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow");
        return false;
    });
});

И вуаля. В зависимости от настроек вашей страницы вы также можете редактировать отображаемый край тела.

Вот демонстрация этого в действии.

Ответ 3

Хотя это ни в коем случае не является официальным, общие практики, которые я придерживаюсь, приведут к чему-то вроде этого:

  • Создайте элемент, который будет действовать как контейнер уведомлений в разметке, но спрячьте его по умолчанию (это можно сделать разными способами - JavaScript, внешний CSS или встроенные стили).
  • Следите за тем, чтобы сценарии не отвечали за поведение уведомления вне разметки. В приведенном выше примере вы можете увидеть onclick, а также другую функцию, которая запускается при загрузке страницы, содержащейся в разметке. Хотя это работает, я вижу это как смешение презентации и поведения.
  • Сохраните презентацию уведомлений, содержащуюся во внешней таблице стилей.

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

Ответ 4

Я вижу следующую функцию jQuery? Я верю, что вводит html в div с id notify-container.

Я не понимаю, как этот JS используется и вызывается на основе определенных событий, возможно, кто-то может объяснить.

var notify = function() {
var d = false;
var e = 0;
var c = -1;
var f = "m";
var a = function(h) {
    if (!d) {
        $("#notify-container").append('<table id="notify-table"></table>');
        d = true
    }
    var g = "<tr" + (h.messageTypeId ? ' id="notify-' + h.messageTypeId + '"' : "");
    g += ' class="notify" style="display:none"><td class="notify">' + h.text;
    if (h.showProfile) {
        var i = escape("/users/" + h.userId);
        g += ' See your <a href="/messages/mark-as-read?messagetypeid=' + h.messageTypeId + "&returnurl=" + i + '">profile</a>.'
    }
    g += '</td><td class="notify-close"><a title="dismiss this notification" onclick="notify.close(';
    g += (h.messageTypeId ? h.messageTypeId : "") + ')">&times;</a></td></tr>';
    $("#notify-table").append(g)
};
var b = function() {
    $.cookie("m", "-1", {
        expires: 90,
        path: "/"
    })
};
return {
    showFirstTime: function() {
        if ($.cookie("new")) {
            $.cookie("new", "0", {
                expires: -1,
                path: "/"
            });
            b()
        }
        if ($.cookie("m")) {
            return
        }
        $("body").css("margin-top", "2.5em");
        a({
            messageTypeId: c,
            text: 'First time here? Check out the <a onclick="notify.closeFirstTime()">FAQ</a>!'
        });
        $(".notify").fadeIn("slow")
    },
    showMessages: function(g) {
        for (var h = 0; h < g.length; h++) {
            a(g[h])
        }
        $(".notify").fadeIn("slow");
        e = g.length
    },
    show: function(g) {
        $("body").css("margin-top", "2.5em");
        a({
            text: g
        });
        $(".notify").fadeIn("slow")
    },
    close: function(g) {
        var i;
        var h = 0;
        if (g && g != c) {
            $.post("/messages/mark-as-read", {
                messagetypeid: g
            });
            i = $("#notify-" + g);
            if (e > 1) {
                h = parseInt($("body").css("margin-top").match(/\d+/));
                h = h - (h / e)
            }
        } else {
            if (g && g == c) {
                b()
            }
            i = $(".notify")
        }
        i.children("td").css("border-bottom", "none").end().fadeOut("fast", function() {
            $("body").css("margin-top", h + "px");
            i.remove()
        })
    },
    closeFirstTime: function() {
        b();
        document.location = "/faq"
    }
 }
} ();

Ответ 5

StackOverflow использует jQuery - код JS, который вы отправили из SO, является вызовом jQuery. Он будет делать именно то, что вы хотите, без кода. Очень рекомендуется.

Ответ 6

Я написал этот кусок Javascript, который делает только это, включая укладку, оставаясь с вами, когда вы прокручиваете, как Stack Overflow, и вся целая страница при нажатии новой панели. Бары также истекают. Штанги также расширяются.

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