Notificaciones con Notify.js

notify.js

Una de las incomodidades de los programadores Web es cambiar ese alert(“”); de JavaScript que en muchas ocasiones mata todo el diseño y la elegancia de nuestra interfaces, es por ello que en este artículo veremos como poner en marcha notificaciones con Notify.js un plugin que sin duda le dará ese toque de profesionalismo sin echar por la borda nuestros diseños de manera sencilla y personalizable, con lo que lograríamos brindar a nuestros usuarios una mejor UX.

Primero que todo debemos bajarnos los archivos necesarios para poder usar Notify.js, necesitamos su librería y JQuery:

Luego creamos una carpeta en nuestro equipo (No necesariamente en la carpeta de nuestro servidor) y luego guardamos nuestros dos archivos, posterior a esto creamos un archivo HTML y lo llamaré index.html y lo ubicamos en el mismo directorio:

notify

abrimos nuestro archivo index.html con el editor de código de nuestra preferencia, si aún no te decides por alguno puedes pasarte por este artículo y hacer tu elección.

 Veamos como mostrar un mensaje al abrir la página:

1
2
3
4
5
6
7
<script src="jquery.js"></script>
<script src="notify.min.js"></script>


<script type="text/javascript">// < ![CDATA[
$.notify("Notificacion con Notify.js");
// ]]></script>

Copiando el contenido anterior en tu archivo index verás como al abrir tu página podrás ver saltar un mensaje estilo notificación.
notificacion
Ahora bien podemos hacer que el mensaje se muestre cuando nosotros queramos ya sea al pulsar un botón o al terminar una acción, veamos los tipos de notificaciones que podemos usar, haciendo uso de un botón:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="jquery.js"></script>
<script src="notify.min.js"></script>


<button>Enviar</button>
<script type="text/javascript">// < ![CDATA[
function Notificaciones () {
$.notify("Notificacion con Notify.js");
$.notify("Notificacion con Notify.js", "warn");
$.notify("Notificacion con Notify.js", "info");
$.notify("Notificacion con Notify.js", "success");
}
// ]]></script>

Con este ejemplo podrás ver como lanzar los diferentes estilos de notificación:
notify

Bueno amigos ese es el funcionamiento básico de este plugín, ahora solo es cuestión de adaptarlo a la lógica de sus aplicaciones, este plugin también posee otras funcionalidades que podrás encontrar en su documentación.

Hasta pronto!.

Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *