通知警报类似于stackoverflow的功能

时间:2010-09-15 13:35:55

标签: javascript css

stackoverflow如何创建滑动效果以提醒用户更改?

4 个答案:

答案 0 :(得分:10)

Stack Overflow使用jQuery framework,它有一个使用简单动画显示隐藏元素的方法,如:

$('#notification-bar').show('slow');

http://api.jquery.com/show/(查看演示)。

它使用CSS中的position:fixed固定在页面顶部:

#notification-bar { 
   position:fixed;
   top: 0px; 
   left: 0px;
   width: 100%;
}

答案 1 :(得分:1)

我认为他们使用定时事件: jQuery Timed Event

哪个向SO服务器发送AJAX调用: http://api.jquery.com/jQuery.ajax/

然后使用Andy E提到的效果在div中显示它

答案 2 :(得分:1)

在Codeplex上TekPub团队在ASP.NET MVC 2.0 Starter Site中使用jQuery of StackOverflow效果的实现非常相似。

你可能想检查一下。

更新:我刚检查了一下,TekPub团队的做法非常简洁!他们有一个与会话绑定的Flash助手。以及在控制器中调用闪存辅助方法以显示闪存消息所需的所有操作。

这是Login Action方法的一个例子:

var registered =_authService.RegisterUser(login, password, confirm, "", "", "");
if (registered) {
    this.FlashInfo("Thank you for signing up!");                        

    return AuthAndRedirect(login, login);
} else {
    this.FlashWarning("There was a problem with your registration");
}

这是一个如何形象的图像:

alt text

我强烈建议您查看他们的代码。

答案 3 :(得分:0)

似乎可以使用AJAX和jQuery完成。顶部100%宽度的div,向下滑动并在收到某些信息时填充内容。你对效果......还是后端功能更感兴趣?