aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Andrés Nieto

Palma de Mallorca, España

Menú

Buscador

Javascript Image Combobox, dale vida a tus select

16 Abr

aNieto2k hace 5086 días en: Accesibilidad, javascript, Programacion, usabilidad, webdev

+ 16

Javascript Image Combobox es un plugin jQuery que permite que nuestros elementos <select/> tenga una vida que hasta ahora no podían tener.

(Ver Imagen)

Se trata de una extensión que permite que los items de los <select /> tengan una imagen para facilitar la selección de items dentro de un listado de opciones.

Para ello hacen uso de un atributo (no estandar) del elemento <option /> llamado icon, que indicará de donde coger la imagen que mostraremos junto al <option />.

 <select name="webmenu" id="webmenu" onchange="showValue(this.value)">
    <option value="calendar" icon="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" icon="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" icon="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" icon="icons/icon_email.gif">Email</option>
    <option value="faq" icon="icons/icon_faq.gif">FAQ</option>
    <option value="games" icon="icons/icon_games.gif">Games</option>
    <option value="music" icon="icons/icon_music.gif">Music</option>
    <option value="phone" icon="icons/icon_phone.gif">Phone</option>
    <option value="graph" icon="icons/icon_sales.gif">Graph</option>
    <option value="secured" icon="icons/icon_secure.gif">Secured</option>
    <option value="video" icon="icons/icon_video.gif">Video</option>
  </select>

Despues con una línea de Javascript este atributo se convertirá en una imagen alojada dentro del <select />.

MSDropDown.init();

Si quieres ver una demo de como quedaría, puedes echarle un vistazo aqui.

14 comentarios, 2 referencias

jQuery image dropdown: Combobox más bonitos con jQuery | nosoloCodigo 16/04/2009 03:04
Javascript Image Combobox, dar vida nas suas select | AlyenStudio, creando sua imagem ! 16/04/2009 03:04

Emilio
@2 abril 16th, 2009 at 3:59 pm

Bien bonito! ya había visto algo parecido también con un framework javascript pero con esta memoria pez que tengo.. hay que empezar a usar más delicious xD

Responder
FoxWoodResortCasino
@3 abril 16th, 2009 at 4:06 pm

Muy bueno gracias por tu consejo.

Responder
Rafael Simal
@4 abril 16th, 2009 at 4:22 pm

Muy Bueno anieto, me lo apunto para las siguientes webs que tenga que hacer 🙂

Responder
Andrés Fernández
@5 abril 16th, 2009 at 4:57 pm

Está muy bien.
Lo que mo me convence demasiado es que haya que modificar el dtd para que sea válido. Podrían haber usado algún atributo estandar, como class, no?

Responder
aRamireZ
@6 abril 16th, 2009 at 5:19 pm

Si no me equivoco, ésto impedirá validar el html. Además como siempre se intenta separar el diseño del html, una etiqueta de ese tipo no tendría mucho sentido.

La iniciativa me parece buena, pues ésto es algo necesario, ya que somos esclavos del interfaz del navegador en este sentido. Pero la forma de ejecutarlo, a mi parecer, no es la correcta, aunque se va encaminando cada vez más.

No se si estoy en lo correcto o bien me equivoco, en este último caso me gustaría que me corrigiesen!

Un saludo a todos!

Responder
Ezequiel
@7 abril 16th, 2009 at 5:30 pm

Hay algo así para Mootools?

Responder
aNieto2k
@8 abril 16th, 2009 at 6:53 pm
@aRamireZ: Estás en lo cierto. El problema es que ese tag tiene pocos atributos y ninguno que nos pueda servir para ello.

Siempre puedes añadir los atributos previamente con JS 😀

Por cierto, si queremos cambiar la forma de recoger la imagen, en la línea 77 del fichero, podemos encontrarnos esta línea:
```
var icon = curretna.icon;
```
Bastaría con cambiar icon por el atributo que más rabia no dé 😀
Responder
aRamirez
@9 abril 16th, 2009 at 9:15 pm

@aNieto2k: A partir de la línea que comentas me ha llegado la idea:

– Se crea un objeto contenedor de los iconos

var iconos={ iconoMusic:'icons/icon_music.gif', }

– Se elimina el atributo icon y se pone id:

Music

– Y la línea 77 se cambia por:

var icon=iconos[curretna.id]

Funciona correctamente y valida el html 😀

Podéis verlo funcionando en una prueba que he creado.

Responder
Dahn
@10 abril 17th, 2009 at 2:19 pm

Me ha gustado mucho la modificación que has hecho, aRamirez, pero sólo le veo un problema: si queremos poner la misma imagen en dos options diferentes, no valida (pues coincidirían en la etiqueta «id»).

Quizá la solución sería meter ese parámetro en «class», indicándolo también en la línea donde se define «icon».

¡Saludos! =)

Responder
peivem
@11 abril 17th, 2009 at 2:26 pm

Hola a todos. Hay otra alternativa mucho mejor para este problema: ZzzELECT
http://www.peivem.com/?post=62

Es un select simulado con CSS y Javascript. Funciona perfecto, EXCEPTO cuando el select tiene scroll, pues se cierra al hacer click en el scroll.

De todas formas ya se viene la versión 2.0 donde eso está solucionado y está mucho más automatizado.

Ojalá les sirva.

Responder
Checo
@12 abril 20th, 2009 at 2:35 am

Que bueno Andres; quedan bien cool los select asi.
Saludos
Checo

Responder
Gonzalo
@13 abril 20th, 2009 at 8:57 am

Interesante ejemplo. Aunque cuando veo estos ejemplos se me cae el alma a los pies. ¿Cuantos años más vamos a tener que lidiar con los widgets HTML estandar?. Estamos en el 2009 y usamos los mismos combos, input … que hace 15 años. Tenemos que hacer virguerias de este tipo para hacer cosas tan ‘raras’ como validar fechas, emails … La verdad es impresionante lo que se ha llegado a hacer con este set de widgets tan, tan limitado. Y encima si usas un atributo no estandar hay gente que te mira mal porque no valida.

Responder
Webmaster Mexico
@14 abril 21st, 2009 at 8:16 pm

A que buen plugin, la interfase del usuario siempre debe ser agrable, gracias, hoy mismo comeinzo a usarlo en mis futuros sitios.
Gonzalo en ocasiones hay que dejar a un lado lo estándar, lamentablemente no se mueve tan rápido como la demanda.
saludos,
desde México.

Responder
stankovic
@15 noviembre 27th, 2009 at 2:33 pm

Mola mucho

Responder