Notificar panel similar a Staoveroverflow

Question

¿Recuerdas el pequeño div que aparece en la parte superior de la página para notificarnos cosas (como nuevas insignias)?

Me gustaría implementar algo así también y estoy buscando algunas mejores prácticas o patrones.

Mi sitio es una aplicación ASP.NET MVC también. Idealmente, las respuestas incluirían detalles como "poner este en la página maestra" y "do esto en los controladores".

Solo para evitar tener que mirar usted mismo, este es el código que veo en el mensaje de bienvenida que recibe cuando no está conectado en 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> 

Me gustaría agregar que entiendo esto perfectamente y también entiendo la implicación de jquery. Solo estoy interesado en quién pone el código en el marcado y cuándo ("quién" como en qué entidades dentro de una aplicación ASP.NET MVC).

Gracias!

Answer 1

Después de husmear el código un poco, esto es una conjetura:

El contenedor siguiente notificación es siempre en la vista Marcas:

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

ese contenedor notificación se oculta de forma predeterminada, y está poblado por javascript dadas ciertas circunstancias. Puede contener cualquier cantidad de mensajes.

Si el usuario no se registra en

Persistencia: Las cookies se utilizan para realizar un seguimiento de si se muestra o no un mensaje.

lado del servidor genera el código en la vista: creo stackoverflow sólo muestra un mensaje si no se registran en el siguiente código se inyecta en la vista:.

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

El showFirstTime() El método javascript simplemente determina si mostrar "¿Es la primera vez que estás aquí?" mensaje basado en si una cookie se ha configurado o no. Si no hay cookies, se muestra el mensaje. Si el usuario toma medidas, la cookie se establece y el mensaje no se mostrará en el futuro. La función nofity.showFirstTime() maneja la búsqueda de la cookie.

Si el usuario se registra en

Persistencia: La base de datos se utiliza para realizar un seguimiento de si un mensaje se ha demostrado o no.

lado del servidor de código generado en la vista: Cuando se solicita una página, el código del lado del servidor comprueba la base de datos para ver qué mensajes necesitan ser visualizada. El código del lado del servidor luego inyecta mensajes en formato json en la vista y pone una llamada javascript a showMessages().

Por ejemplo, si estoy conectado a una vista, ver lo siguiente en el margen de beneficio en el SO:

<script type="text/javascript"> 
1 
2 var msgArray = [{"id":49611,"messageTypeId":8,"text":"Welcome to Super User! Visit your \u003ca href=\"https://stackoverflow.com/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> 

Así que el código del lado del servidor, ya sea inyecta código para llamar al método "showFirstTime" si el usuario no está conectado o inyecta mensajes y llamadas "showMessages" para un usuario conectado.

Más acerca del código del lado del cliente

El otro componente clave es el "notificar" JavaScript módulo Picflight ha minified-DE ​​(se puede hacer lo mismo usando YSlow para Firebug). El módulo de notificación maneja el llenado del div de notificación basado en el javascript generado por el servidor.

No estás conectado, del lado del cliente

Si el usuario no está conectado, entonces el módulo gestiona los eventos cuando el jugador de los usuarios X a cabo la notificación o va a la AYUDA para crear una cookie. También determina si se muestra el primer mensaje de tiempo buscando una cookie.

iniciada la sesión, el lado del cliente

Si el usuario está conectado, el módulo de notificar agrega todos los mensajes generados por el servidor en el div notificación. También es muy probable que utilice ajax para actualizar la base de datos cuando un usuario descarta un mensaje.

Answer 2

Aunque estos son por ningún funcionario de medios, las prácticas comunes que sigo debería desembocar en algo como esto:

• Crear el elemento que va a actuar como contenedor de notificación en el marcado, pero ocultarlo por defecto (esto se puede hacer de muchas maneras: JavaScript, CSS externo o estilos en línea).
• Mantenga las secuencias de comandos responsables del comportamiento de la notificación fuera de la marca. En el ejemplo anterior, puede ver que hay un onclick, así como otra función que se activa en la carga de página contenida en el marcado. Aunque funciona, veo esto como una mezcla de presentación y comportamiento.
• Mantenga la presentación del mensaje de notificación en una hoja de estilo externa.

Una vez más, estas son solo mis prácticas habituales establecidas en el contexto de su pregunta. Lo que tiene que ver con el desarrollo web, como lo demuestra la naturaleza de su pregunta, es que hay muchas maneras de hacer lo mismo con los mismos resultados.

Answer 3

StackOverflow utiliza jQuery - el código JS que ha publicado desde SO es una llamada jQuery. Hará exactamente lo que quieras con casi ningún código. Muy recomendable.

Answer 4

This answer tiene una solución completa.

Copiar y pegar:

Este es el margen de beneficio, inicialmente oculta para que podamos desaparecer en:

<div id='message' style="display: none;"> 
    <span>Hey, This is my Message.</span> 
    <a href="#" class="close-notify">X</a> 
</div> 

Aquí se aplican los estilos:

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

Y esto es javascript (usando jQuery):

$(document).ready(function() { 
    $("#message").fadeIn("slow"); 
    $("#message a.close-notify").click(function() { 
     $("#message").fadeOut("slow"); 
     return false; 
    }); 
}); 

y listo. Dependiendo de la configuración de su página, es posible que también desee editar el margen del cuerpo superior en la pantalla.

Here is a demo of it in action.

Answer 5

Veo la siguiente función jQuery? Creo que inyecta el html en el div con id notify-container.

No entiendo cómo se usa y se llama este JS en función de ciertos eventos, tal vez alguien pueda explicarlo.

var notify = function() { 
var d = false; 
var e = 0; 
var c = -1; 
var f = "m"; 
var a = function(h) { 
    if (!d) { 
     $("#notify-container").append('<table id="notify-table"></table>'); 
     d = true 
    } 
    var g = "<tr" + (h.messageTypeId ? ' id="notify-' + h.messageTypeId + '"' : ""); 
    g += ' class="notify" style="display:none"><td class="notify">' + h.text; 
    if (h.showProfile) { 
     var i = escape("https://stackoverflow.com/users/" + h.userId); 
     g += ' See your <a href="/messages/mark-as-read?messagetypeid=' + h.messageTypeId + "&returnurl=" + i + '">profile</a>.' 
    } 
    g += '</td><td class="notify-close"><a title="dismiss this notification" onclick="notify.close('; 
    g += (h.messageTypeId ? h.messageTypeId : "") + ')">&times;</a></td></tr>'; 
    $("#notify-table").append(g) 
}; 
var b = function() { 
    $.cookie("m", "-1", { 
     expires: 90, 
     path: "/" 
    }) 
}; 
return { 
    showFirstTime: function() { 
     if ($.cookie("new")) { 
      $.cookie("new", "0", { 
       expires: -1, 
       path: "/" 
      }); 
      b() 
     } 
     if ($.cookie("m")) { 
      return 
     } 
     $("body").css("margin-top", "2.5em"); 
     a({ 
      messageTypeId: c, 
      text: 'First time here? Check out the <a onclick="notify.closeFirstTime()">FAQ</a>!' 
     }); 
     $(".notify").fadeIn("slow") 
    }, 
    showMessages: function(g) { 
     for (var h = 0; h < g.length; h++) { 
      a(g[h]) 
     } 
     $(".notify").fadeIn("slow"); 
     e = g.length 
    }, 
    show: function(g) { 
     $("body").css("margin-top", "2.5em"); 
     a({ 
      text: g 
     }); 
     $(".notify").fadeIn("slow") 
    }, 
    close: function(g) { 
     var i; 
     var h = 0; 
     if (g && g != c) { 
      $.post("/messages/mark-as-read", { 
       messagetypeid: g 
      }); 
      i = $("#notify-" + g); 
      if (e > 1) { 
       h = parseInt($("body").css("margin-top").match(/\d+/)); 
       h = h - (h/e) 
      } 
     } else { 
      if (g && g == c) { 
       b() 
      } 
      i = $(".notify") 
     } 
     i.children("td").css("border-bottom", "none").end().fadeOut("fast", function() { 
      $("body").css("margin-top", h + "px"); 
      i.remove() 
     }) 
    }, 
    closeFirstTime: function() { 
     b(); 
     document.location = "/faq" 
    } 
} 
}(); 

Answer 6

Escribí esta parte de Javascript que hace exactamente eso, incluyendo el apilamiento, permaneciendo con usted mientras se desplaza como lo hace Stack Overflow y empujando toda la página hacia abajo cada vez que se agrega una nueva barra. Las barras también caducan. Las barras también se deslizan hacia la existencia.

// Show a message bar at the top of the screen to tell the user that something is going on. 
// hideAfterMS - Optional argument. When supplied it hides the bar after a set number of milliseconds. 
    function AdvancedMessageBar(hideAfterMS) { 
     // Add an element to the top of the page to hold all of these bars. 
     if ($('#barNotificationContainer').length == 0) 
     {    

     var barContainer = $('<div id="barNotificationContainer" style="width: 100%; margin: 0px; padding: 0px;"></div>'); 
     barContainer.prependTo('body'); 

     var barContainerFixed = $('<div id="barNotificationContainerFixed" style="width: 100%; position: fixed; top: 0; left: 0;"></div>'); 
     barContainerFixed.prependTo('body'); 
    } 

    this.barTopOfPage = $('<div style="margin: 0px; background: orange; width: 100%; text-align: center; display: none; font-size: 15px; font-weight: bold; border-bottom-style: solid; border-bottom-color: darkorange;"><table style="width: 100%; padding: 5px;" cellpadding="0" cellspacing="0"><tr><td style="width: 20%; font-size: 10px; font-weight: normal;" class="leftMessage" ></td><td style="width: 60%; text-align: center;" class="messageCell"></td><td class="rightMessage" style="width: 20%; font-size: 10px; font-weight: normal;"></td></tr></table></div>'); 
    this.barTopOfScreen = this.barTopOfPage.clone(); 

    this.barTopOfPage.css("background", "transparent"); 
    this.barTopOfPage.css("border-bottom-color", "transparent"); 
    this.barTopOfPage.css("color", "transparent"); 

    this.barTopOfPage.prependTo('#barNotificationContainer'); 
    this.barTopOfScreen.appendTo('#barNotificationContainerFixed'); 


    this.setBarColor = function (backgroundColor, borderColor) {  

     this.barTopOfScreen.css("background", backgroundColor); 
     this.barTopOfScreen.css("border-bottom-color", borderColor); 
    }; 

    // Sets the message in the center of the screen. 
    // leftMesage - optional 
    // rightMessage - optional 
    this.setMessage = function (message, leftMessage, rightMessage) { 
     this.barTopOfPage.find('.messageCell').html(message); 
     this.barTopOfPage.find('.leftMessage').html(leftMessage); 
     this.barTopOfPage.find('.rightMessage').html(rightMessage); 

     this.barTopOfScreen.find('.messageCell').html(message); 
     this.barTopOfScreen.find('.leftMessage').html(leftMessage); 
     this.barTopOfScreen.find('.rightMessage').html(rightMessage); 
    }; 


    this.show = function() { 
     this.barTopOfPage.slideDown(1000); 
     this.barTopOfScreen.slideDown(1000); 
    }; 

    this.hide = function() { 
     this.barTopOfPage.slideUp(1000); 
     this.barTopOfScreen.slideUp(1000); 
    }; 

    var self = this; 


    if (hideAfterMS != undefined) { 
     setTimeout(function() { self.hide(); }, hideAfterMS); 
    }  
} 

Para usarlo, hay que usar jQuery y garantizar que no haya márgenes o de relleno en el cuerpo de la página.

El parámetro que toma AdvancedMessageBar es opcional. Si se proporciona, hará que la barra desaparezca después de una cierta cantidad de tiempo en milisegundos.

var mBar = new AdvancedMessageBar(10000); 
mBar.setMessage('This is my message', 'Left Message', 'Right Message'); 
mBar.show(); 

Si desea apilarlas, simplemente cree más objetos AdvancedMessageBar y se apilarán automáticamente.