Smoke.Js for showing alerts and messages

Posted by in HTML5

Today, i am going to show you a Javascript library I use a lot, and it’s very easy to use. It’s smoke.js, and i use it for showing alerts, confirms and for asking data to the user, including a personalize style!

You can try here, on the website http://smoke-js.com/.

After including the reference to the library smoke.js, we have 4 choices:

  • Alerts

In Javascript, to “send” an alert we write “alert(‘text’); With this library, we write:

smoke.alert('text');

  • Show an alert for X seconds

Instead os waiting to the user to clic the OK button to continue, we can set an alert to be visible for an interval of time, in miliseconds. After this time, the message will dissapear. For example, to show a message for 1000 miliseconds, 1 second, we write:

smoke.signal('text',1000);

  • Confirm an action

La third  option is to ask the user con confirm an action, forcing the user to clic on a button, where the actions for each button are differents. In the ext example, the message appear with the labels Salir (Exit) y Cancelar (Cancel), and, depending on our choice, we will receibe a different message. That’s the way of set a diferent action for every button.

smoke.confirm('text',function(e){
if (e){
smoke.alert('Clicked Exit');
}else{
smoke.alert('Clicked 'Cancel');
}
},
{ok:"Exit", cancel:"Cancel"} // Nombre de los botones
); // Muestra mensaje de confirmación

  • Ask a data to the user

Las action of this library ask the user to insert text, using “prompt”, like InputBox in VBA.

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

To end with, I would like to say that we can adapt the CSS style to our needs, and this feature make this tool very handy, and close to our style.

Trying smoke.js

Here, you hava a small peace of code to test smoke.js, with every option i told you before: try smoke.js.

NOTE: Last versión of smoke.js, includes a new quiz functionality i haven’t tried!.

I hope you like it, and use it!

Google+ Comments - Comentarios Google+