Notify: plugin para JQuery :: Un blog más de Internet.

Notify: plugin para JQuery

07.02.2013 Por Antonio Villamarín

JQuery Notify es un plugin que permite crear un mensaje de alerta, información u oferta desplegable en la parte superior de la pantalla cuando el usuario está viendo tu web. Es un componente de Grid CSS.

Este plugin no necesita añadir CSS especial ya que viene incluido en el propio archivo js. En cualquier caso, si quisieras modificar el aspecto del mensaje existen dos opciones.

La primera de ellas se trata de añadir en la misma llamada al plugin el color de fondo y el del texto. La segunda es que puedes añadir una configuración CSS sobre la clase .notify-message.

Ahora vamos a ver cómo implementarlo.

Primero debemos añadir el mensaje que queremos que aparezca en el notify.

<div id="anyIDtag">Mensaje de notificación</div>

Ahora añadimos los ficheros js, que deberían ir al final del html, justo antes de “<body>”.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="notify.jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#anyIDtag').notify();
    });
</script>

Con esto ya tendríamos funcionando el plugin al cargar la página.

Vamos ahora con las opciones.

El plugin incorpora cuatro posibles opciones a la hora de su carga, que son: color, background, close, active.

color: Se usa para especificar el color del texto que aparecerá en el mensaje. Se especifica como color: “#FFF”

background: Se trata del color de fondo del mensaje. El color en formato hexadecimal.

close: Por defecto es false y se usa para indicar si queremos que aparezca un aspa para su cierre definitivo o un flecha para su ocultación temporal.

active: Se emplea para indicar si el mensaje debe aparecer activo o por el contrario debe aparece la flecha para desplegar el mensaje. por defecto es activo.

Ejemplo:

<script>
    $(document).ready(function(){
        $('#anyIDtag').notify({ // Optional parameters. Default values.
            active: true, // Muestra el mensaje.
            close: true, // Muestra el aspa para cerrar.
            color: "#444", // Color de la fuente gris al 80%.
            background: "#FF9" // Color de fondo amarillo suave.
        });
    });
</script>