Inicio > Desarrollo, Recursos > jQuery Alert Dialogs, reemplazo para alert(), prompt() y confirm()

jQuery Alert Dialogs, reemplazo para alert(), prompt() y confirm()

Viernes, 2 de Enero de 2009
Ir a comentarios Dejar un comentario

jQuery Alert Dialogs, es un reemplazo muy elegante para las funciones alert(), prompt() y confirm() de javascript.

Uso

Simplemente hay que añadir estas líneas al <head>:

&lt;script src="/path/to/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="/path/to/jquery.ui.draggable.js" type="text/javascript"&gt;&lt;/script&gt;
 
&lt;script src="/path/to/jquery.alerts.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" /&gt;

Una vez cargados los ficheros necesarios podremos llamar a las funciones personalizadas:

Alert()

jAlert es el sustituto de alert() y nos muestra alerta básica con un botón de aceptar para que el usuario acepte que ha visto el aviso.

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

jPrompt()

Sustituto de prompt() que nos da la opción de introducir un valor desde la ventana.

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

jConfirm()

Alternativa a confirm() en la que ofrecemos al usuario la opción de aceptar o cancelar una acción.

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

Demo

Los chicos de jQuery Alert Dialogs han publicado una demo para que podamos ver que tal funciona este sistema.

Consejo de Uso

anieto2k ha propuesto utilizar estas modificaciones de las funciones clásicas de javascript utilizando un sistema que convierta esta opción en una alternativa y que en caso de fallar nos muestre su funcionalidad original, pienso que es muy buena idea:

//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);
});

Fuente: anieto2k

thedavis Desarrollo, Recursos Imprimir , ,

Posts Relacionados

  1. Sin comentarios aún.
  1. Viernes, 2 de Enero de 2009 a las 11:29 | #1
    Bitacoras.com