jQuery Alert Dialogs... reemplaza las alertas Blog de Martin Iglesias

jQuery Alert Dialogs... reemplaza las alertas

Escrito por Martín Iglesias y leído 15,266 veces. Ver comentarios

06ENERO/2009

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 1 - HTML

<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 2 - 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');
});

Acerca del Autor:

Diseñador web freelance en Coruña Galicia | Martin Iglesias

Martín Iglesias, diseñador web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 15 años de experiencia en el desarrollo de páginas web profesionales.

Si te ha gustado este artículo, por favor, ayúdame a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

jQuery Alert Dialogs... reemplaza las alertas

Acerca del Autor:

Artículos relacionados: