JMiur [E]

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:

3 comentarios:

Unknown  

Excelente información, me ha gustado el efecto del ejemplo animado, veré en qué lo puedo utilizar :P

Responder
Indeziisoow  

Es muy bueno el plugin pero no funciona en mi blog. :(

Responder
JMiur  

No sé cuál es tu blog.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR