Si hay elementos importantes en la estructura de una página web y que al mismo tiempo sean difíciles de maquetar, estos son los select boxes, o listas desplegables. La dificultad en maquetar es existe tanto en los campos de selección múltiple y también a los de selección simple.
Cada dispositivo y navegador tiene su forma de renderizar, por tanto el resultado final puede no ser el más agradable visualmente y aplicar los estilos de CSS para transformarlos en el diseño proyectado por el diseñador no es tarea trivial. Si, además el sitio web que estamos desarrollando, lo hacemos utilizando un CMS, menos trivial aún.
Felizmente, como en otras ocasiones, el JavaScript viene al rescate y en la web podemos encontrar diferentes soluciones, en bibliotecas de JavaScript, capaces de resolver este problema y ayudar con una solución relativamente rápida.
Estas herramientas esconden el despegable original, del formulario, y crean una representación en HTML, mucho más sencilla de maquetar.
Chosen
Chosen es un plugin de jQuery que transforma los listados largos en los “select” en listados más “user-friendly”.
Soporta todos los navegadores modernos (Firefox, Chrome,Safari y IE9), y en modo de compatibilidad el IE8. No funciona correctamente en Android, iPhone y iPod Touch. Además de jQuery, también está disponible para Prototype
Utilizando el Chosen con el Ajax Chosen, es posible mejorar la funcionalidad y utilizar Ajax para llamar los valores para el select.
Además Chosen tiene diferentes opciones y atributos que permiten tener un control avanzado de las listas desplegables.
Wordpress tiene un plugin que lo utiliza y Drupal también tiene un módulo.
SelectBoxIt
SelectBoxIt de Greg Franko es una herramienta muy fácil de utilizar y al mismo tiempo potente. Además de soportar los temas de Twitter Bootstrap y el jQueryUI por defecto, también lo hace con el jQuery Mobile y reclama el soporte para navegadores de dispositivos móviles y tablets.
Permite utilizar Ajax/JSON
ddSlick
Si lo que estamos buscando es un desplegable con imágenes, pues ddSlick es interesante para ello. Además de la posibilidad de añadir imágenes “out of the box”, también es posible añadir descripciones en las opciones del listado. Creo que esto lleva a otro nivel los desplegables. También permite la utilización de JSON para rellenar las opciones del desplegable, además de otras personalizaciones interesantes.
gentleSelect
Otra alternativa para listas demasiado largas, puede dividirlas por un número de columnas o líneas. GentleSelect, además de facilitar la maquetación, también ofrece la posibilidad de hacerlo automáticamente a través de un comando. Es una herramienta interesante de experimentar, pero no aconsejo que se utilice en producción. A no ser que sepamos lo que estamos haciendo.
Otros plugins:
