Ambiance – Notificaciones con jQuery
En este artículo vamos a ver un ejemplo práctico a la hora de utilizar un plugin jQuery de notificaciones llamado «Ambiance».
Este plugin te permite disponer de notificaciones tras ejecutarse un evento o tras pulsar un botón o link.
Puedes lanzar una notificación que tras x segundos desaparezca, puedes lanzar mensajes de error, correcto o lo que se te ocurra. Puedes cambiar el ancho, el tiempo de aparición, mostrar una notificación permanente.
Vamos a ilustrar un ejemplo sencillo que podría ser útil en una tienda virtual a la hora de añadir a la cesta alguno de los productos de la tienda. Al hacer click en el botón que aparezca esta notificación indicando que el producto se ha añadido correctamente.
Lo primero que se debe hacer es descargar el plugin y añadirlo en nuestro <head> junto con la librería jQuery, los estilos necesarios y su llamada:
<link href="assets/css/jquery.ambiance.css" rel="stylesheet" type="text/css">
<script src="assets/js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="assets/js/jquery.ambiance.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#demo1').click(function () {
$.ambiance({message: "Se ha añadido correctamente a la cesta.", type: "success"});
return false;
});
});
</script>
Al hacer click en el link o botón con id=»demo1″ procedemos a mostrar la notificación de tipo «succes».
En algún lugar de nuestro <body> tendremos el botón o link que ejecutará la acción de mostrar la notificación:
<a href="#" id="demo1">Añadir a la cesta</a>
Al hacer click en este link se mostraría 2 segundos una notificación a la derecha de nuestra pantalla con el siguiente aspecto.
Es muy fácil de customizar o añadir un nuevo tipo o estilo de notificación. Por ejemplo podríamos añadir la siguiente clase a nuestra hoja de estilos:
.ambiance-custom {
background: #000000;
color: #00FF00;
padding: 10px;
margin-right: 100px;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Y su llamada jQuery:
$.ambiance({message: "Custom styling, you have to define everything!",
type: "custom",
timeout: 0
});
Obteniendo como resultado un notificación customizada o diferente:
Autor
¿Buscas trabajo de programador?
Ver más sobre
Deja una respuesta