Smoke.js, libreria Javascript para mensajes y alertas

Posted by in HTML5

Hoy les voy a hablar de una librería que suelo utilizar y de las que saco muy buen rendimiento gracias a su sencillez de uso, y a lo visual que es. Se trata de smoke.js, y la utilizo para mostrar alertas, confirmaciones y petición de datos al usuario con estilo personalizado!

Podeis verla en funcionamiento en su web http://smoke-js.com/.

Tras incluir la referencia a la libreria smoke.js, tenemos 4 opciones:

  • Mostrar alertas

En Javascript, para enviar una alerta usamos «alert(‘texto’); Para usar la libreria usamos:

smoke.alert('texto');

  • Mostrar alertas durante X segundos

En lugar a que el usuario pulse OK para continuar, podemos programar la alerta que sea visible sólo durante un tiempo, medido en milisegundos, transcurrido dicho tiempo, el mensaje desaparece! Por ejemplo, para mostrar un mensaje durante 1000 milisegundos, o sea, 1 segundo, escribimos:

smoke.signal('texto',1000);

  • Confirmar una acción

La tercera de las opciones es solicitarle al usuario una confirmación obligando a pulsar un botón, y donde las acciones de pulsar una u otra son distintos. En el siguiente ejemplo, el mensaje aparece con los botones de Salir y Cancelar, y según pulsemos, nos saldrá un mensaje u otro. De esta forma, podemos personalizar las acciones vinculadas a cada botón.

smoke.confirm('texto',function(e){
if (e){
smoke.alert('Pulsa Salir');
}else{
smoke.alert(Pulsa 'Cancelar');
}
},
{ok:"Salir", cancel:"Cancelar"} // Nombre de los botones
); // Muestra mensaje de confirmación

  • Solicitar información a usuario

La última de las acciones de esta librería tiene que ver con la introducción de texto por parte del usuario, usando prompt, lo que en VBA es InputBox.

smoke.prompt('Escribe algo',function(e){ // como el InputBox
if (e){
smoke.alert('Ha escrito .. '+e);
}else{
smoke.alert('No escribe nada ');
}
});

Por último, comentar que podemos adaptar el CSS a nuestras necesidades, lo que hace a esta pequeña herramienta muy versátil y adaptable a nuestro diseño.

Probando smoke.js

Aquí teneis el código muy simple para probar smoke.js, con todo lo que os he contado antes: probando smoke.js.

NOTA: En la última versión de smoke.js, hay una nueva funcionalidad, que es quiz, y de la que os hablo en esta entrada.

Espero que os sea de utilidad!