En esta entrada vamos a ver cómo crear notificaciones con jquery en nuestro sitio web, de tal manera aparezca en un lugar donde el usuario la vea, puedes ver un ejemplo dando click aqui.
Existen muchos plugins pero en este artículo yo les enseñare como hacer sus propias notificaciones para que sean libres de modificarlas a su antojo.
Si nunca has utilizado jquery te recomiendo te des una vuelta por mi curso gratuito, que no te tomara más de 1 hora y te aseguro que al final sabrás utilizar bien esta librería.
Ahora vamos a lo divertido, primero anexo un código css el cual contiene nuestra clase de nombre Error, en este caso haremos una notificación de error, por lo cual pondré colores rojos:
.Error{
position:absolute;
z-index:32000;
top:10px;
left:50%;
padding:5px;
width:500px;
margin-left:-255px;
text-align:center;
border: #d8d8d8 1px solid;
background:#F8F8F8;
color:#f00;
font-weight:bold;
opacity:0;
font-size:1.2em;
}
El código anterior nos sirve para posicionar nuestra notificación, la cual aún no existe, la clase esta con opacity igual a 0 para que nuestro control tenga una animación de aparición inicial y le dé más estética, también le he asignado la posición top para que aparezca arriba y centrado, ustedes pueden diseñar su notificación a su antojo después de ver esta entrada.
En el siguiente código de javascript explico línea por línea que es lo que va haciendo:
function MensajeError(mensaje, time) {
//si no se envia la variable time, esta se define por defecto en 6 segundos
if (time === undefined) time = 6000;
//agregamos el div a nuestra pagina con la clase css Error anteriormente hecha
$("body").append("<div class='Error'></div>");
//asignamos el texto del error al div que creamos
$(".Error").html(mensaje);
//aqui procedemos a crear la animación para que el div se muestre y se oculte despues de cierto tiempo
$(".Error")
.animate({ //seleccionamos el div
opacity: 1 //aparece
}, 500 //la animación se realiza medio segundo
, function () { //ejecutamos un callback con función anonima para desaparecer la notificación despues de 6 segundos
$(".Error").animate({ //seleccionamos nuevamente el div
opacity: 0 //ocultamos
}, time //tiempo de 6 segundos por defecto
, function () {
//al final en el callback del ultimo evento eliminamos el div de la pagina.
$(this).remove();
}
)
})
}
Si nunca han utilizado la función anímate() de jquery te recomiendo te des una vuelta por mi artículo donde explico con detalle su funcionalidad.
Y bueno así de sencillo se hace una notificación con jquery sin utilizar plugins extras ni nada, ya solo queda invocarla asi: MensajeError(‘¡un error fatal!’).