informaticaPC

Tutorial de JQuery

Notificaciones

Notificaciones con Gritter

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.

Gritter

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.

Información

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>

Ejemplo

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).

Primera página Página anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso