Archivo de la etiqueta: JSON

Clase Notificaciones JS

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();

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

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";

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

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'
};
//--------------------------------

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

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

Recorrer un objeto JSON en Javascript

Supongamos que tenemos un objeto JSON sencillo  como este:

var args = ['jaime', 'amparo@amparo.es', 'hola a todos'];

La manera más simple de recorrer ese objeto es usando un for:

for(var json in args){
    console.log(args[json]);
}

Si el objeto JSON tuviese valores asociativos:

var args = {
   "nombre": "jaime",
   "email": "amparo@amparo.es",
   "mensaje": "hola a todos"
}

Usaríamos el mismo for para recorrerlo y mostrar tanto sus claves como sus valores:

for(var json in args){
    console.log(json+': '+args[json]);
}