jQuery Alert Dialogs, ofrece un reemplazo muy elegante a las funciones alert(), prompt() y confirm() de javascript.
¿Como usarlo?
Simplemente tendremos que añadir estas líneas a nuestro <head /> y dispondremos de esta nuevo funcionalidad.
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="/path/to/jquery.alerts.js" type="text/javascript"></script>
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />Una vez cargados los ficheros necesarios podremos llamar a las funciones que nos mostrarán las alertas.
jAlert()
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
Para verlos funcionando podemos verlos todos reunidos en esta demo que han montado
Consejo de uso
Personalmente estas modificaciones de funciones básicas, siempre me han dado miedo ya que deberían usarse como una alternativa y los sistemas propuestos siempre suelen ser muy dependientes del script, en este caso, si por cualquier cosa no es posible ejecutar jAlert(), jConfirm() o jPrompt() dejaremos de ofrecer al usuario la alerta necesaria para nuestra aplicación, por ese motivo os propongo usas un sistema que convierta esta opción en una alternativa y que en caso de fallar nos muestre su funcionalidad original.
//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);
});
13 comentarios, 0 referencias
+
#