jQuery
jQuery

Vamos a seguir aprendiendo sobre jQuery, y en especial, a crear plugins con este fantástico framework javascript. En esta ocasión crearemos uno sencillo para poder crear notificaciones que duren un determinado tiempo y después se desvanezcan, nuestro proyecto constará de tres archivos, uno llamado notificaciones.js donde crearemos nuestro plugin, otro llamado index.php, aquí será donde llamemos a nuestro plugin y archivos necesarios para hacerlo funcionar, y otro llamado notificaciones.css donde añadamos estilos a nuestras ventanas.

Estos tipos de notificaciones pueden ser muy útiles en nuestros proyectos, ya que los podemos utilizar cuando ciertos eventos se produzcan haciendo uso de condicionales if, muy útiles.

Nuestras notificaciones funcionarán de la siguiente forma:

El contenedor general tendrá una posición fixed para que acompañen al usuario aunque haga scroll.

Tendrán una opción que se llama cssClass, a través del cuál le podemos asignar una clase para darle estilos css, si no se establece ese parámetro, por defecto le asignaremos info.

Al asignar la clase en nuestro plugin, lo hacemos con notificacion- + cssClass, de esta forma nuestras notificaciones siempre se llamarán notificicion-info, notificacion-error etcétera, este punto debía quedar claro ya que será a través de la clase que se le darán los estilos css a nuestras notificaciones.

También tendremos un timeout para decidir pasados cuántos segundos queremos que se desvanezca nuestra notificación, el parámetro será pasado en milisegundos, así que 1000 será 1 segundo. Haremos la comprobación con el operador ternario de javascript si el timeout es mayor a mil o no para poder darle un valor, así evitaremos problemas de performance de nuestro plugin.

Lo demás como veremos será bastante intuitivo y sencillo de seguir, así que podemos empezar creando archivos.
Lo primero que haremos será crear un archivo css al que llamaremos notificaciones.css, dentro colocaremos el siguiente código css muy sencillo como veremos.

Como vemos, por defecto creamos tres tipos de estilos, uno para notificaciones tipo error, otro para informativas y otro para tipo success, aparte damos a #notificaciones una posición fixed para que se desplacen aunque hagamos scroll en nuestras páginas.

Ahora podemos ver el código de nuestro plugin, como veremos, el código lo tengo completamente detallado dentro del mismo para que sea lo más fácil posible de entender.

Creamos un archivo llamado notificaciones.js y dentro colocamos el siguiente código.

Bueno, como vemos se puede entender con unos conocimientos previos de jQuery. Ahora sólo nos queda ver como podemos llamar a nuestro plugin para hacer uso de él, como veremos no puede ser más sencillo.

Creamos un archivo llamado index.php y dentro colocamos el siguiente código.

Lo más importante, aparte de la llamada al plugin, es como comprobamos si existe el contenedor de las notificaciones con if ($(“#notificaciones”).length == 0), si se da el caso, lo cuál significa que no se ha creado, con window.document.createElement creamos el div contenedor y le asignamos la id notificaciones, de esta forma tendremos donde alojar todas las notificaciones que vayamos creando, lo demas es una simple llamada a un plugin haciendo uso de sus opciones.

Con esto, si abrimos nuestro navegador y apuntamos a nuestro index.php veremos tres notificaciones, una de información, otra de error y otra de success y como veremos pasados unos segundos, se desvanecerán. También podremos comprobar que si hacemos scroll, éstas nos perseguirán por todo el documento.

Espero que se haya entendido y empecemos ya a crear plugins y no a dedicarnos sólo a buscarlos, así podremos tener más opciones laborales y con mejores perspectivas, puede ser una cosa muy demandada.

Un saludo.