jueves, enero 01, 2009

Alertas Javascript

Cuando desarrollamos una aplicación web siempre necesitamos mostrar determinados mensajes al usuario, ya sea un pop-up con un mensaje de aviso o con uno pidiéndole confirmación para realizar una determinada acción. Todos los navegadores, que soportan javascript, implementan unas funciones básicas para hacer esto (alert, confirm...) pero tienen un problema: nunca tienen el estilo de nuestra aplicación; es decir, quedan feos. Si queremos que los pop-ups tengan el mismo estilo que la aplicación tendremos que usar otra solución. Internet Explorer tiene una función showModalDialog que muestra un .html como un pop-up modal, pero como he dicho sólo iExplorer lo soporta (no es un estándar). Para solucionar esto no nos quedaba más remedio que buscarnos la vida con Javascript y el DOM pero gracias a las nuevas librerías Javascript que tenemos hoy en día (Dojo, jQuery...) este trabajo nos lo dan ya hecho, o casi.
Hoy os presento un posible solución: jQuery Alert Dialogs.
Este plug-in de jQuery nos provee un reemplazo para tres funciones (Alert, Confirm y Prompt) con la ventanja de que podremos editar sus estilos (que es lo que estamos buscando).
Unos ejemplos de uso serían:

// alert
jAlert('This is a custom alert box', 'Alert Dialog');

// confirm
jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
jAlert('Confirmed: ' + r, 'Confirmation Results');
});

//Promt
jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
if( r ) alert('You entered ' + r);
});
En $.alerts.dialogClass se puede cambiar la class aplicada a la ventana emergente.

Además Andrés Nieto nos propone un forma de trabajar con estas funciones (o con otras similares):

//alert()
var oAlert = alert;
function alert(txt, title) {
try {
jAlert(txt, title);
} catch (e) {
oAlert(txt);
}
}
alert("Hola", "Prueba");

//confirm()
var oConfirm = confirm;
function confirm(txt, title, func) {
try {
jConfirm(txt, title, func);
} catch (e) {
if (oConfirm (txt, title)) func();
}
}
confirm("Hola", "Prueba", function(){
alert("Prueba", "Superada");
});

//prompt()
var oPrompt = prompt;
function prompt(txt, input, title, func){
try {
jPrompt(txt, input, title, func);
} catch(e) {
func(prompt(txt, input, title));
}
}
prompt("Hola", "Valor", "Prueba", function(r) {
if (r) alert(r);
});
Con esta forma de trabajar nos garantizamos que el pop-up va a funcionar y además como sobreescribimos las funciones por defecto es mucho más cómodo de trabajar.

No hay comentarios:

Publicar un comentario