代码之家 › 专栏 › 技术社区 › Vivian River

如何在网页上显示横幅以通知登录的用户他们有新消息?

notifications jquery asp.net

Vivian River · 技术社区 · 15 年前

我被要求对应用程序进行编程,这样当用户登录时,他们会看到一条特殊消息,通知他们有一条新消息。

我认为StackOverflow非常好地实现了这个功能。横幅出现在页面的顶部,使他们不可能错过和不显眼的方式。堆垛机能否插话,如何实现类似的功能,这在我的ASP.net应用程序?

2 回复 | 直到 15 年前

Raphael 15 年前

我在我的大多数应用程序上都使用这种技术。基本上,当用户需要得到某些通知时,我会包含一个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.NETMVC):

<%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的滑动面板所需要的