He estado buscando una barra de notificaciones como la de este sitio que se muestra en la parte superior notificando a un usuario sobre cambios, etc. Debe tener la capacidad de ser cerrada. Todo lo que puedo encontrar para jQuery es this onejQuery barras de notificación que pueden descartarse?
¿Alguien tiene alguna otra recomendación o sugerencia?
Super fácil de construir su propia. Sólo asegúrese de que el primer <div> bajo la etiqueta de <body>, y establecer el css a algo como esto:
#notify {
position:relative;
width:100%;
background-color:orange;
height:50px;
color:white;
display:none;
}
Luego, en sus notificaciones, basta con deslizar hacia abajo:
$('#notify').html('new message').slideDown();
y añadir un evento de clic a cerrarlo y limpiar la notificación:
$('#notify').click(function(){
$(this).slideUp().empty();
});
demostración: http://jsfiddle.net/AlienWebguy/Azh4b/
Si quieres que sea realmente como StackOverflow de que simplemente hubiera establecido una cookie cuando se emite la notificación, y después de cada espectáculo carga de la página todas las notificaciones que tienen las cookies aplicables.
Si desea que varias notificaciones, cambian #notify-.notify y la pila em up. Algo como esto:
$('.notify').live('click',function() {
$(this).slideUp('fast',function(){$(this).remove();});
});
$(function(){
notify('You have earned the JQuery badge!');
notify('You have earned the Super Awesome badge!');
});
function notify(msg) {
$('<div/>').prependTo('body').addClass('notify').html(msg).slideDown();
}
Demostración: http://jsfiddle.net/AlienWebguy/5hjPY/
Nunca consideré construir el mío ... tiene sentido. Gracias y gracias por el gran ejemplo :) – Paul
De nada, me alegro de ayudar :) – AlienWebguy
De hecho, he hecho algo muy parecido a esto por un par de proyectos de la mía.
Hay un JSFiddle demo, que funciona pero es un elevador recto de mis libs personales - código que probablemente podría usar limpieza y optimización, pero da una buena impresión de cómo funciona.
La ventaja añadida de mi código es que no muestra los elementos duplicados - es "pings" al actualmente existente. Al hacer clic en cualquier parte de la notificación, se cierra.
El único inconveniente que puedo ver para esto es que cubre parte del contenido principal, pero eso se puede corregir si coloca el contenedor de notificaciones en la parte superior de su contenido con position: static.
Por favor, hágamelo saber si hay cualquier información específica que desea que le explique; hay bastante código para ejecutar en una respuesta.
Probablemente escribiré un plugin jQuery que haga esto en algún momento, ya que solo hay un ejemplo. Lo publicaré aquí cuando lo haga.
NB. El setInterval() solo se usa con fines de demostración. Además, hay diferentes alertas de colores (éxito, información, advertencia, error: verde, azul, naranja y rojo, respectivamente).
Es posible que desee probar "noty" https://github.com/needim/noty
Es realmente * * fácil de hacer. ¡Incluso este sitio tiene uno! – Blender
@Blender: "Incluso esto" suena como simple porque * incluso * Stackoverflow lo ejecutó. –
La mayoría de las cosas en este sitio son bastante mínimas y simples (y obviamente están bien codificadas). – Blender