En ocasiones te resultará útil el utilizar el mostrar notificaciones de algún tipo a tus usuarios, y como no, existen varios plugins para JQuery que te facilitarán mucho la tarea.
Uno de ellos es Gritter, que puedes descargar desde este enlace a su repositorio oficial.
Después de descargarlo y descomprimirlo copia los archivos jquery.gritter.min.js y jquery.gritter.css así como la carpeta images a tu proyecto.
IMPORTANTE: en la hoja de estilos se hace referencia a la carpeta de imágenes, por lo que si cambias las rutas deberás actualizarlas en dicha hoja.
Algunas de sus propiedades más importantes son:
- title: título de la notificación.
- text: texto de la notificación.
- image: permite indicar una imagen a mostrar.
- sticky: si su valor es 'true' permanecerá siempre visible.
- time: tiempo en milisegundos que será mostrada la notificación.
Veamos un sencillo ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | Notificaciones con Gritter</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Agregamos JQuery -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<!-- Agregamos el plugin y su hoja de estilos -->
<script type="text/javascript" src="./gritter/js/jquery.gritter.min.js"></script>
<link type="text/css" rel="stylesheet" href="./gritter/css/jquery.gritter.css" />
<script type="text/javascript">
$(document).ready(function()
{
// Opciones globales de las notificaciones
$.extend($.gritter.options, {
position: 'bottom-right',
fade_in_speed: 'medium',
fade_out_speed: 2000,
time: '3000'
});
// --------------------------------
// Mostrar una notificación
$('#add-regular').click(function(){
$.gritter.add({
title: "¿Qué te parece?",
text: "Con Gritter es muy fácil añadir <strong>notificaciones</strong> en tu web",
image: "foto.jpg",
sticky: false
});
return false;
});
});
</script>
</head>
<body>
<a href="#" id="add-regular">Haz clic aquí</a>
</body>
</html>
EXPLICACIÓN: al cargarse la página definimos algunas opciones globales que se aplicarán a todas las notificaciones creadas posteriormente (posición, efecto duración del mismo así como el tiempo en milisegundos que será visible). Posteriormente mostramos una notificación en la que se mostrará una imagen y que permanecerá siempre visible (a no ser que la cerremos manualmente situando el cursor sobre ella).
