Listas desplegables elegantes con jQuery Dropkick

DropKick es un plugin jQuery que nos permite tener dropdowns <select> de aspecto profesional que funcionan a la perfección con teclado e incluso con dispositivos móviles. Funciona a la perfección con todos los navegadores.

Como ven el aspecto es muy distinto a los típicos selects que nos presenta el navegador.

Para disponer de este efecto deberás buscar el plugin e incluirlo junto con la librería jQuery y su llamada en el <head> de vuestra página. También harán falta algunos estilos que incorpora el plugin.

<link rel="stylesheet" href="dropkick.css" type="text/css">
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.dropkick-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
   $('.default').dropkick();
});
</script>

Y luego en nuestro <body> componer un <select> como sueles hacer pero añadiéndole un class=»default».

<select name="country" class="default">
   <option value="">Try Me!</option>
   <option value="AU">Australia</option>
   <option value="CA">Canada</option>
   <option value="DE">Germany</option>
   <option value="JP">Japan</option>
   <option value="GB">United Kingdom</option>
   <option value="US">United States</option>
</select>

Ver el ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(1 voto, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre