SummArg | Cursos y recursos para webmasters

31/07/2011

Vitaminas para tus < select >

Chosen es un plugin para jQuery que nos permite convertir nuestros campos de selección en un recurso mas amigable para el usuario y con un diseño mas atractivo. Para utilizarlo debemos vincular el archivo chosen.css a nuestro documento y antes de la etiqueta de cierre </body> insertamos jQuery, el script Chosen y la activación del mismo.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="chosen/chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript"> $(".chzn-select").chosen(); </script>

Luego bastará con añadir la clase chzn-select a cualquier select que tengamos.
<select id="bears_single" title="Your Favorite Type of Bear" style="width:350px;" class="chzn-select" tabindex="7">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
<option>Brown Bear</option>
<option>Giant Panda</option>
<option selected>Sloth Bear</option>
<option disabled>Sun Bear</option>
<option>Polar Bear</option>
<option disabled>Spectacled Bear</option>
</select>

Funciona con Prototype y con jQuery.
Descarga | Demo

Dejar un comentario