Contenido

Kwicks para jQuery

15 abr

+ 6

Una de las peculiaridades de la página de MooTools es el menú superior, un deslizante muy colorido que hace más alegre la simple tarea de seleccionar una opción, a esto se le llama Kwick (lo he descubierto hoy).

Ahora los que disfrutamos del poder de jQuery tambien podemos disfrutar de una implementación de Kwicks para este gran framework.

Código

//HTML
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
</ul>
//CSS
/* defaults for all examples */
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
display: block;
float: left;
overflow: hidden;
padding: 0;
cursor: pointer;
}
/* defaults for all examples */
.kwicks li {
width: 125px;
height: 100px;
margin-right: 5px;
}
#kwick1 { background-color: #53b388;}
#kwick1.active { background-color: #86e6bb;}
#kwick2 {background-color: #5a69a9;}
#kwick2.active {background-color: #8d9cdc;}
#kwick3 {background-color: #c26468;}
#kwick3.active {background-color: #f5979b;}
#kwick4 { background-color: #bf7cc7; margin-right: none;}
#kwick4.active {background-color: #efaffa;}
//Javascript
$().ready(function() {
     $('.kwicks').kwicks({
               maxWidth: 205,
               spacing:  5
      });
});

Opciones

La simplicidad de uso limita el número de opciones disponibles para la personalización de nuestro Kwick, pero se bastan para conseguir un resultado muy vistoso.

maxWidth: Requerido
Tamaño en px. del máximo de nuestro Kwick
duration: Default: 200
Número de milisegundos de la transición
easing:
Easing function para la animación (Requiere plugin Easing)
spacing: Default:0
Tamaño en px. de separación entre cada kwick
[Descargar][Demo]

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.