Contenido

Javascript Image Combobox, dale vida a tus select

16 abr

+ 16

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

preview
(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.

  • 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

  • Muy Bueno anieto, me lo apunto para las siguientes webs que tenga que hacer :)

  • 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?

  • 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!

  • @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 :D

    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é :D

  • @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 :D

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

  • 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! =)

  • 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.

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

  • 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.

  • 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.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.