Morton 19 de agosto de 2011 a las 07.35
   Imprimir artículo
elWebmaster.com

jQuery: Chosen, un plug-in para mejorar dropdowns y selecciones múltiples


jquerywideExiste un elemento al que dificilmente logramos darle estilo, y ese es el elemento Select: Se ve distinto en cada navegador y en cada sistema operativo, y nos da un gran dolor de cabeza a la hora de trabajar con selecciones múltiples. Por suerte ahora, existe Chosen, un plugin que se encarga de esta optimización.

Haz clic aquí para ver una demostración >>

Chosen nos brinda nuevas opciones como la auto-sugerencia, búsqueda, elegancia y efectividad a la hora de manejar selecciones múltiples. Pero lo mejor de todo… es que es totalmente estilizable. Está disponible tanto para jQuery como para Prototype.

Para colocarlo en nuestro sitio, lo primero es el código HTML:

  1. <select class="chosen" style="width: 200px;"> <option>Choose...</option> <option>jQuery</option> <option selected="selected">MooTools</option> <option>Prototype</option> <option>Dojo Toolkit</option> </select> <select class="chosen" style="width: 400px;" multiple="true"> <option>Choose...</option> <option>jQuery</option> <option selected="selected">MooTools</option> <option>Prototype</option> <option selected="selected">Dojo Toolkit</option> </select>

Y luego, finalmente, el código JQuery:

  1. jQuery(document).ready(function(){
  2. jQuery(".chosen").chosen();
  3. });

Para poder editar los textos placeholder, hará falta este código extra:

  1. jQuery(document).ready(function(){
  2. jQuery(".chosen").data("placeholder","Select Frameworks...").chosen();
  3. });

¿Qué esperas para usarlo?

Haz clic aquí para ver una demostración >>

Fuente original del artículo: David Walsh Blog
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (4)

  1. JALP dice:

    Me pueden ayudar como hacer para que me funcione el js

  2. Sergio dice:

    Fantástico!

  3. Ismael Cabrera dice:

    Como puedo hacer para validar el formualrio donde este el Chosen

  4. juan dice:

    Tengo instalado dos desplegables enlazados. Sin chosen funcionan a la perfeccion, se selecciona en uno y se cargan los valores relacionados en el segundo.

    El problema viene cuando le aplico chosen.. se ven muy bonitos y el primero muestra los resultados, pero al seleccionar cualquie valor del primero NO SE CARGAN los valores del segundo. De heco permanece vacio, si datos. Alguien sabe algo al respecto?

    Gracias

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder