Los plugins JavaScript/jQuery más utilizados en mis desarrollos - Parte 2 - SweetAlert

lunes, 19 de octubre de 2015

Los plugins JavaScript/jQuery más utilizados en mis desarrollos - Parte 2 - SweetAlert


Este post forma parte de una serie de artículos en los que menciono los plugins que más utilizo en mis desarrollos:

  1. Parte 1: Select2
  2. Parte 2: SweetAlert
  3. Parte 3: Noty
  4. Parte 4: Animate.css
  5. Parte 5: Waipoints
  6. Parte 5: ScrollToFixed
  7. Parte 6: Parallax

SweetAlert

Es un plugin bastante útil a nivel visual, sinceramente aporta poco a nivel funcional, pero a nivel estético aporta una infinidad. En los sitios que he propuesto el uso de este plugin, no lo solo lo han aceptado, sino que se ha vuelto un plugin de uso común en cada uno de sus proyectos.



Este plugin viene a sustituir y/o mejorar el uso de al menos 3 funciones de JavaScript: Alert, Confirm y Prompt. 

Pero si ya tenemos esta funcionalidad cubierta, ¿Para qué sustituirla?
Muy simple, es básicamente por un tema de estética e incluso usabilidad. Un alert, detiene la ejecución javascript a la espera que el usuario haga click en el botón aceptar, con lo que si sucediese algún evento importante, no podríamos enterarnos, ya que javascript se encuentra detenido. 

Captura de un alert normal de javascript

Captura de un alert usando SweetAlert


Como vemos en las imágenes anteriores, la mejora en cuanto diseño es muy grande, simplemente no son comparables. Esto sin contar, que podemos hacer que el mensaje se parezca o combine con nuestra página web, en cuanto a colores, iconos tipo de letra etc. 

Para usar este plugin es necesario entender cómo funcionan los callbacks en JavaScript, si aún no sabes como van, no te preocupes, lo cogerás enseguida...

Los alerts, confirm y promt los usábamos de la siguiente manera:


La ejecución del script de la imagen anterior, no llegaría ejecutar la segunda linea hasta que el usuario hiciera click en el alert... Los que nos permitía hacer cosas como la siguiente:


Con el sweetAlert no es tan simple, ya que el no detiene la ejecución de javascript, con lo que necesitaremos usar callbacks y quedará así:


Como se muestra en la imagen anterior el segundo parámetro que le pasamos a la función swal es un callback que el invocará cuando el usuario haga click en ok o cancel...

A continuación un ejemplo de su uso:



Para más información del plugin, visitar la página oficial: http://t4t5.github.io/sweetalert/

0 comentarios :

Publicar un comentario