Descarga
Apprise ocupa muy poco. 5kb en total para la descarga completa y 3kb para la versión reducida.
Implementación
Para funcionar correctamente, Apprise requiere el framework javascript jQuery. Una de las maneras más fáciles de agregar jQuery a su proyecto, es para incluir la versión ofrecida mediante la adición de la línea siguiente a su sección de head.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
No se olvide añadir los siguientes archivos al encabezado de la página
<script type="text/javascript" src="js/apprise-1.5.full.js"></script>
<link rel="stylesheet" href="css/apprise.css" type="text/css" />
Ahora que todo está en su lugar, puede llamar a la función de Apprise como si de una alerta de javascript se tratara.
<a href="http://google.com" onclick="apprise('Ahora está saliendo de nuestro portal');">Salir del portal</a>
Callbacks funcionan de manera similar a la hora de confirmar la función, devuelve true si "Ok" o "Sí" está marcado y false si "Cancelar" o "No" se hace clic. Si se utiliza una entrada de texto, sólo el texto del usuario ingresado será devuelto o "false" si no se ha introducido ninguno.
<script>
$(document).ready(function()
{
apprise('Ready to begin?', {'verify':true}, function(r)
{
if(r)
{
// user clicked 'Yes'
...
}
else
{
// user clicked 'No'
...
}
});
});
</script>
Asegúrese de que usted pasa en las variables modificadas para obtener el efecto deseado. De manera predeterminada, el cuadro de informar sólo mostrará un botón "Ok" junto con su mensaje. La opción de confirmar añade el botón "Cancelar", mientras que la opción de verificación utiliza "Sí" y "No" en lugar de botones. También puede editar el texto predeterminado para los botones, o enviar los nuevos valores en cada llamada para informar. De entrada es sólo eso, un cuadro de entrada. Animate es una presentación sencilla por efecto, y se puede establecer en true o la velocidad deseada, con el valor por defecto es 400.
{
'confirm' : false, // Ok and Cancel buttons
'verify' : false, // Yes and No buttons
'input' : false, // Text input (can be true or string for default text)
'animate' : false, // Groovy animation (can true or number, default is 400)
'textOk' : 'Ok', // Ok button default text
'textCancel' : 'Cancel', // Cancel button default text
'textYes' : 'Yes', // Yes button default text
'textNo' : 'No' // No button default text
}
Personalización
La hoja de estilos (apprise.css) es la clave de todo, basta con modificar los estilos declarados dentro de ajustar la apariencia. Debido a que este es en realidad inyectar elementos en el DOM, que desea, asegúrese de cerrar todas las etiquetas, ya que pueden causar informar a fallar y le dará un dolor de cabeza innecesarios.
La interfaz se supone que se asemejan a la de un sistema operativo, pero parece web-ish. Yo hago el plan de liberar algunos temas más, pero eso dependerá de si o no a nadie en realidad descarga y utiliza Apprise. He intentado mantener todo lo más simple posible, con sólo 5 (máximo) los elementos que se inyecta. La desventaja de esto es el estilo se limita a los pocos elementos.
Ejemplos
Puede comprobar el funcionamiento de algunos ejemplos desde la página oficial de Apprise.
