Notificaciones JS es una sencilla clase que he programado en Javascript y que nos permite mostrar mensajes de notificación configurables.
USANDO LA CLASE
La clase hace uso del framework JQuery, por tanto lo primero es obtener el archivo JS correspondiente desde la página oficial.
Para crear una notificación, lo único que debemos hacer es crear un objeto ‘notificacion‘ y, a continuación, llamar al método ‘mostrar‘ cuando nos haga falta.
var mensaje = new Notificacion("Esto es un mensaje de ejemplo");
mensaje.mostrar(); |
var mensaje = new Notificacion("Esto es un mensaje de ejemplo");
mensaje.mostrar();
La notificación creada se ocultará si pulsamos sobre ella o automáticamente tras 3 seg.
CONFIGURANDO
El método constructor permite indicar el tipo de notificación que queremos crear y su posición en pantalla. Para ello debemos usar 2 argumentos más:
var posicion = ['med','cen'];
var mensaje = new Notificacion("Esto es un mensaje de ejemplo", 2, posicion); |
var posicion = ['med','cen'];
var mensaje = new Notificacion("Esto es un mensaje de ejemplo", 2, posicion);
El primer argumento (obligatorio) es el contenido de la notificación. El segundo argumento es el tipo de notificación. Es un entero que puede tomar los valores desde el 1 hasta el 2. Los tipos de notificaciones que hay implementados son:
- Tipo 1: valor por defecto. Notificación solo con texto.
- Tipo 2: notificación con texto e imagen de aviso.
Las notificaciones tipo 2 traen una imagen por defecto que puede ser cambiada editando la linea:
this.icono = "img/info256.png"; |
this.icono = "img/info256.png";
El último argumento es un array de dos elementos que nos permite indicar donde va a aparecer la notificación.
El primer valor del array sirve para indicar la posición vertical y su valores son:
- ‘arr’: Arriba.
- ‘abj’: Abajo.
- ‘med’: Medio.
El segundo valor del array, para la posición horizontal:
- ‘izq’: Izquierda.
- ‘der’: Derecha.
- ‘cen’: Centro.
Otra forma de indicar la posición de la notificación (sin necesidad de indicarla en el constructor) es usando el método mover:
//Creamos la notificacion con los valores por defecto
var noti= new Notificacion("prueba de notificacion");
noti.mover(['med','cen']); //Movemos al sitio deseado
noti.mostrar(); //Mostramos la notificacion |
//Creamos la notificacion con los valores por defecto
var noti= new Notificacion("prueba de notificacion");
noti.mover(['med','cen']); //Movemos al sitio deseado
noti.mostrar(); //Mostramos la notificacion
Si queremos una configuración mas avanzada, podemos cambiar las propiedades CSS de las notificaciones editando la parte que dice Configuracion:
//------------ Configuracion
this.icono = "img/info256.png";
this.propiedades = {
'width': '17%',
'height': '13%',
'color': '#FFF',
'font-size' : '1.1em',
'background': '#000',
'margin' : '1em',
'padding': '1em',
'text-align': 'center',
'opacity' : '0.5',
'display' : 'none',
'position': 'absolute',
'border-radius': '0.8em',
'-moz-border-radius': '0.8em',
'-webkit-border-radius': '0.8em'
};
//-------------------------------- |
//------------ Configuracion
this.icono = "img/info256.png";
this.propiedades = {
'width': '17%',
'height': '13%',
'color': '#FFF',
'font-size' : '1.1em',
'background': '#000',
'margin' : '1em',
'padding': '1em',
'text-align': 'center',
'opacity' : '0.5',
'display' : 'none',
'position': 'absolute',
'border-radius': '0.8em',
'-moz-border-radius': '0.8em',
'-webkit-border-radius': '0.8em'
};
//--------------------------------
También podemos controlar el tiempo que tarda la notificación en cerrarse cambiando el valor de la variable:
this.duracion = 3000; //valor en milisegundos |
this.duracion = 3000; //valor en milisegundos
Para finalizar, indicar que la versión actual es una RC (release Candidate) y que,por tanto, no está exenta de bugs y/u optimizaciones.
En sucesivas versiones se irá mejorando la clase e incorporando nuevas funcionalidades como la de tener diferentes tipos de notificaciones.
Se pueden descargar los archivos necesarios desde la sección snippets del portfolio en mi página , desde mi cuenta en GitHub o pulsando aquí.
