Alerta de notificación similar a cómo funciona stackoverflow

Question

¿Cómo crea stackoverflow el efecto de deslizamiento para alertar a un usuario de un cambio?

Answer 1

desbordamiento de pila utiliza el jQuery framework, que tiene un método para mostrar un elemento oculto utilizando una animación simple, algo así como:

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

http://api.jquery.com/show/ (echa un vistazo a las demos).

Se fija a la parte superior de la página utilizando position:fixed en CSS:

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

Answer 2

Parece que se puede hacer con AJAX y jQuery. Un div con un ancho del 100% en la parte superior que se desliza hacia abajo y se llena de contenido al recibir cierta información. ¿Estás más interesado en el efecto ... o la funcionalidad de fondo?

Answer 3

Creo que usar un evento programado: jQuery Timed Event

que envía una llamada AJAX a Los sirve SO: http://api.jquery.com/jQuery.ajax/

Y luego lo muestra en el div usando el efecto Andy E mencionado

Answer 4

Hay una implementación muy similar usando jQuery del efecto StackOverflow en el ASP.NET MVC 2.0 Starter Site por el equipo TekPub en codeplex.

es posible que desee comprobarlo.

Actualización: ¡Acabo de comprobarlo y la forma en que lo hizo el equipo de TekPub es realmente genial! Tienen un flash helper que está vinculado a la sesión. y todo lo que tiene que hacer para llamar a los métodos de flash helper en el controlador para mostrar los mensajes flash.

He aquí un ejemplo del método de sesión Acción:

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

y aquí está una imagen de cómo se ve:

recomiendo encarecidamente que se tome un vistazo a su código .