Alertas deslizantes con jQuery

Cuantas veces nos encontramos con una interface en la que mostrar una notificación por cuestiones de espacio es prácticamente imposible sin tener que retocar todo el diseño. Para estos casos podemos utilizar el plugin jQuery SlideNote.

SlideNote es un pequeño plugin que nos permite con tan solo unas lineas de código mostrar alertas deslizantes, sin demasiadas complicaciones y con un aspecto visual muy atractivo.

Para los amantes de WordPress la buena noticia es que SlideNote tiene disponible en descarga su versión de plugin WordPress para instalarlo fácilmente desde el tablero de nuestro gestor de contenidos.

Aspecto visual de las notificaciones:

notificaciones jQuery

Las alertas se despliegan con un efecto slide, y se ocultan con el mismo efecto en sentido opuesto. El plugin se puede personalizar bastante, algo que podemos cambiar fácilmente es, por ejemplo, el botón de cerrar el dialogo tan solo indicando la ruta a la nueva imagen que deseamos utilizar.

Dentro de las posibilidades tenemos la de obtener la nota utilizando AJAX, personalmente encuentro esta opción muy buena para sitios que desean mostrar muchas alertas variadas, utilizar Ajax nos evita tener que cargar muchas divs invisibles incrementando el peso de nuestro documento.

Ejemplo de implementación:

$('#myNotification').slideNote({
  where: 640,
  corner: 'left',
  url: 'ajax.html',
  container: 'note',
  closeImage: '/images/close.png'
});

Para los que nos preocupa el rendimiento, el plugin cuenta con una pagina de pruebas en donde podemos ver el rendimiento del plugin en distintos escenarios.

Categorizado en: