Recursos y Descargas

Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).

jQuery Alert Dialogs... reemplaza las alertas

Escrito por: Martín el 06-01-2009 18:56:06

jQuery Alert Dialogs... reemplaza las alertas

A menudo utilizamos alerts, prompts o confirms en nuestras webs o sistemas para avisar algo al usuario o pedirle su confirmación, o simplemente que entre un dato.

jQuery nos da una posibilidad enorme de mejorar estas feas ventanas de alerta de javascript con muy pocas líneas de código como siempre.

¿Qué ventajas obtenemos? En funcionamiento ninguna, pero en estética ganamos mucho, ya que podemos controlar vía CSS los colores, tipografías y fondos que usarán nuestras ventanitas.

¿Cómo se usa? Como siempre, agregando las librerías jQuery (ver código 1), y llamando a la función (ver código 2)

¿No te convence? Mira la demo que puso su creador para que veas los diferentes usos...

Recomendación: sería recomendable utilizar siempre una función que, en caso de fallar el uso de jQuery, nos muestre los diálogos de modo tradicional, ya que si, por alguna razón, jQuery fallara, dejaremos de avisar al usuario de nuestra web de algo que puede ser importante.

Fuente: anieto2k.

Código XHTML

<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" />

Código JAVASCRIPT

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

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

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

[Descargar Adjunto]