通知面板类似于stackoverflow

Question

还记得显示在页面顶部的小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应用程序中的哪些实体)感兴趣.

谢谢!

Answer 1

这个答案有一个完整的解决方案

复制粘贴:

这是标记,最初是隐藏的,所以我们可以淡化它:

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

瞧.根据您的页面设置,您可能还需要在显示屏上编辑主体margin-top.

这是它的实际演示.

Answer 2

在稍微窥探一下代码之后,这是一个猜测:

以下通知容器始终位于视图标记中:

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

该通知容器默认是隐藏的,并且在某些情况下由javascript填充.它可以包含任意数量的消息.

如果用户未登录

持久性:Cookie用于跟踪消息是否显示.

服务器端在视图中生成代码:我认为如果您未登录,stackoverflow仅显示一条消息.以下代码将注入视图中:

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

showFirstTime()javascript方法只是决定是否显示"这是你第一次来这里吗？" 基于cookie是否已设置的消息.如果没有cookie,则显示该消息.如果用户采取了操作,则会设置cookie,并且将来不会显示该消息.nofity.showFirstTime()函数处理cookie的检查.

如果用户已登录

持久性:数据库用于跟踪消息是否已显示.

服务器端在视图中生成代码:当请求页面时,服务器端代码检查数据库以查看需要显示的消息.然后,服务器端代码以json格式将消息注入视图,并向showMessages()发出javascript调用.

例如,如果我登录到视图,我在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".

有关客户端代码的更多信息

另一个关键组件是Picflight已经缩小的"通知"JavaScript模块(你可以使用yslow为firebug做同样的事情).通知模块基于服务器端生成的javascript处理通知div的填充.

未登录,客户端

如果用户未登录,则模块在用户X发出通知时处理事件或通过创建cookie转到FAQ.它还通过检查cookie来确定是否显示第一次消息.

登录,客户端

如果用户已登录,则通知模块将服务器生成的所有消息添加到通知div中.当用户解除消息时,它也很可能使用ajax来更新数据库.