miércoles, 1 de junio de 2011

Vagabundia

Vagabundia


Apprise: Ventanas de alerta con jQuery

Posted: 31 May 2011 08:00 PM PDT

Apprise es un plugin de jQuery que permite crear ventanas de alerta sencillas o un poco más complejas donde es posible interactuar con los usuarios.

Siempre se empieza igual, debemos tener la librería agregada antes de </head> y lo lógico es cargarla directametne desde las API de Google:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
Luego, debemos poner el plugin que viene en dos versiones, una normal y otra minimizada; cualquiera de ellas, la agregamos directamente:
<script type='text/javascript'> //<![CDATA[   ....... aquí pegamos el contenido del archivo apprise-1.5.full.js o apprise-1.5.min.js //]]> </script>
Y un poco de CSS que también podemos descargar en dos versiones, una minimizada y otra full; yo recomendaría esta última si es que queremos modificarlo un poco ya que son unas pocas líneas:
<style>   .appriseOverlay {} /* es el fondo de toda la pantalla */   .appriseOuter {} /* es el rectángulo contenedor */   .appriseInner {} /* es el rectángulo interior con el contenido a ser mostrado */   /* los botones y los DIVs donde se muestran */   .appriseInner button {}    .appriseInner button:hover {}   .aButtons,.aInput {}     .aTextbox {} </style>
A partir de acá, podemos usarlo de distintos modos; lo más simple es un enlace:
<a href="#" onclick="apprise('texto a mostrar');"> click </a>
El resto de las alternativas, funciona de modo semejante a como lo hacen las ventanas de alerta normales:
apprise('TEXTO', {'confirm':true}); apprise('TEXTO', {'verify':true}); apprise('TEXTO', {'input':true});
Si usamos alguna de las variantes que nos permiten interactuar, debemos usar JavaScript para leer el resultado y actuar en consecuencia.

Por ejemplo, con algo así, podemos consultar a los usuarios si quieren cambiar un color por otro:
<a href="#" onclick="preguntar();"> click </a>
y usaríamos una función:
<script> function preguntar() {   apprise('¿Color rojo?', {'verify':true}, function(r) {     if(r) {       document.getElementById("colores").style.backgroundColor='#F00';     } else {       document.getElementById("colores").style.backgroundColor='#FF0';     }   }); } </script>
Haciendo click en ese enlace, haría que un determinado elemento cuyo ID sea colores, tuviera un color rojo o amarillo de acuerdo a cuál sea la respuesta:

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog