A principios de esta semana, mientras trabajaba en el sistema de códigos de cupones de ZineScripts, descubrí la necesidad de poder crear y presentar dinámicamente un cuadro de mensaje a los visitantes de Zine. La rutina habitual incluiría buscar en el repositorio de complementos de jQuery y terminar usando una alternativa de caja de luz, pero decidí tomarme el tiempo y crear una solución de notificación única, que estoy compartiendo con ustedes hoy.
Paso 1 - XHTML
Yendo directo al grano, ¿qué necesitas para crear este efecto?
Lo único que necesita es crear un div en su página y poner algo de contenido dentro de él. Algo como esto:
<div id="box"> <p><b>Title!</b>Boring explanation.</p> </div>
En nuestro ejemplo, el título del mensaje, el cuerpo del mensaje y el icono de advertencia se crean usando un solo
Paso 2:CSS
El complemento, que estamos haciendo hoy, agrega sus propias reglas CSS para el posicionamiento del cuadro, lo que hace posible el efecto de rebote, pero aún necesitamos codificar el diseño del cuadro en nuestro archivo de hoja de estilo.
estilos.css - Parte 1
/* The bouncing box */
#box{
background:url('img/box_bg.jpg') repeat-x center top #fcfcfc;
height:115px;
padding:20px;
margin-top:-10px;
padding-top:30px;
width:400px;
border:1px solid #fcfcfc;
color:#494848;
text-shadow:1px 1px 0 white;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
}
#box p{
font-size:25px;
background:url('img/warning.png') no-repeat 10px center;
padding-left:90px;
}
#box p b{
font-size:52px;
display:block;
}
#box,
#main,
a.button{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
Aquí le damos estilo al diseño del bounceBox . También hay un par de reglas que jQuery aplica en línea, que asignan un 'fijo' posicionándolo en el cuadro y céntrelo en el centro de la página, lo cual es necesario para la animación. De esta manera hay una clara división entre los estilos por diseño y aquellos por funcionalidad.
estilos.css - Parte 2
/* Styling the big button */
a.button{
color:white;
letter-spacing:-2px;
padding:20px;
display:block;
text-shadow:1px 1px 0 #145982;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
font-size:80px;
font-weight:bold;
text-align:center;
width:350px;
border:1px solid #60b4e5;
margin:60px auto;
/*
CSS3 gradients for webkit and mozilla browsers,
fallback color for the rest:
*/
background-color: #59aada;
background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
}
a.button:hover{
/* Lighter gradients for the hover effect */
text-decoration:none;
background-color: #5eb2e2;
background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
}
En la segunda parte del código, aplicamos una serie de reglas CSS3 al botón para lograr ese aspecto pulido. Observe los dos gradiente reglas que están dirigidas a Mozilla Firefox y los navegadores Webkit (Safari y Chrome). Desafortunadamente, a diferencia de otras reglas de CSS3, no comparten una sintaxis común para mostrar un degradado, lo que aumenta la carga del desarrollador hasta cierto punto.
También es importante especificar un color de fondo alternativo en caso de que el navegador no admita degradados CSS.
Paso 3:jQuery
Primero, comencemos creando nuestro complemento bounceBox. Como hemos visto antes, crear un complemento jQuery es solo una cuestión de extender el $.fn objeto con una nueva función. El 'esto' de la nueva función es equivalente al conjunto de elementos de jQuery en el que se invocó el método.
complemento-bouncebox/jquery.bouncebox.1.0.js
(function($){
/* The plugin extends the jQuery Core with four methods */
/* Converting an element into a bounce box: */
$.fn.bounceBox = function(){
/*
Applying some CSS rules that center the
element in the middle of the page and
move it above the view area of the browser.
*/
this.css({
top : -this.outerHeight(),
marginLeft : -this.outerWidth()/2,
position : 'fixed',
left : '50%'
});
return this;
}
/* The boxShow method */
$.fn.bounceBoxShow = function(){
/* Starting a downward animation */
this.stop().animate({top:0},{easing:'easeOutBounce'});
this.data('bounceShown',true);
return this;
}
/* The boxHide method */
$.fn.bounceBoxHide = function(){
/* Starting an upward animation */
this.stop().animate({top:-this.outerHeight()});
this.data('bounceShown',false);
return this;
}
/* And the boxToggle method */
$.fn.bounceBoxToggle = function(){
/*
Show or hide the bounceBox depending
on the 'bounceShown' data variable
*/
if(this.data('bounceShown'))
this.bounceBoxHide();
else
this.bounceBoxShow();
return this;
}
})(jQuery); Estamos definiendo cuatro métodos separados que convierten el div en un bounceBox (y aplican las reglas CSS de posicionamiento), lo muestran, lo ocultan o alternan entre los dos usando animate() método jQuery.
Para la alternancia mantenemos una variable interna con el método de datos, que marca si el cuadro se ha mostrado u ocultado.
Todos estos métodos están disponibles después de incluir la biblioteca jQuery y jquery.bounce.1.0.js archivos a la página. Para lograr un efecto de rebote ordenado, necesitará el complemento de aceleración de jQuery también, que se incluye en el directorio de complementos en el zip.
Es realmente fácil usar el complemento, como puede ver en el código a continuación.
secuencia de comandos.js
$(document).ready(function(){
/* Converting the #box div into a bounceBox: */
$('#box').bounceBox();
/* Listening for the click event and toggling the box: */
$('a.button').click(function(e){
$('#box').bounceBoxToggle();
e.preventDefault();
});
/* When the box is clicked, hide it: */
$('#box').click(function(){
$('#box').bounceBoxHide();
});
});
El código anterior se ejecuta cuando se activa el evento de documento listo, por lo que estamos seguros de que todos los elementos de la página están disponibles para jQuery. Lo primero que hacemos es encubrir el #box div a un bounceBox y vincula a los oyentes al evento de clic en el botón y el cuadro en sí.
Puede poner cualquier código HTML que desee en el cuadro div y se convertirá correctamente en un bounceBox. También puede tener más de un cuadro de rebote en la página al mismo tiempo.
¡Con esto, nuestro complemento BounceBox está completo!
Conclusión
Puede usar este complemento jQuery para presentar notificaciones al usuario de una manera llamativa. Puede colocar fácilmente un formulario de registro, suscripción a un boletín informativo o incluso algún tipo de publicidad como contenido del cuadro div. Siéntete libre de experimentar y compartir lo que has hecho en la sección de comentarios.