Как я могу отобразить баннер на веб-странице, чтобы уведомить вошедшего в систему пользователя, что у него есть новое сообщение? - PullRequest
1 голос
/ 14 сентября 2010

Мне было поручено добавить функциональность в существующее приложение ASP.net Form.При входе в систему пользователи проходят проверку подлинности.

Меня попросили запрограммировать приложение таким образом, чтобы при входе в систему они видели специальное сообщение, уведомляющее их о том, что у них есть новое сообщение (я).*

Я думаю, что StackOverflow реализует эту функцию очень хорошо.Баннеры появляются в верхней части страницы таким образом, что их невозможно пропустить и ненавязчиво.Могут ли стакеры сообщить, как реализовать функциональность, подобную этой, в моем приложении ASP.net?

Ответы [ 2 ]

2 голосов
/ 14 сентября 2010

Я использую эту технику в большинстве своих приложений. В основном я включаю div, когда пользователь должен быть уведомлен о чем-то. Класс CSS выглядит так:

 .success {
    z-index:10;
    position:absolute;
    display: block;
    width: 100%;
    height:60px;
    background-color:#D8D4AE;
    border-bottom: 2px solid #000000;
    top:0;
    left:0;
    color:#817C55;
}

Чтобы показать div, я добавляю его на свою страницу со следующим кодом (ASP.NET MVC):

<%if (TempData["Success"] != null)
          {%>
          <% Html.RenderPartial("Success"); %>
        <%} %>

И для создания эффекта слайда в вашем div должен быть следующий скрипт:

$(document).ready(function () {
    $('.success').hide();
    $('.success').css("display", "block");
    $('.success').slideDown('slow');
    $('.success').click(function () {
        $('.success').slideUp('slow');
    });
    setTimeout(function () { $('.success').slideUp('slow'); }, 5000);
});

Код был упрощен, но это в основном то, что вам нужно для создания Stackoverflow-подобной скользящей панели

0 голосов
/ 14 сентября 2010

Проверьте Jgrowl http://www.stanlemon.net/projects/jgrowl.html

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

...