Artigos e Notícias


Javascript Image Combobox, dar vida nas suas select

16 de abril de 2009

Javascript Image Combobox é um plugin jQuery que permite que nossos elementos <select/> tenha uma vida que até agora não podiam ter.

previewSe trata de uma extensão que permite que os items dos <select/> tenham uma imagem para facilitar a seleção de items dentro de uma listagem de opções. Para isso fazem usamos um atributo (não estandar) do elemento <option /> chamado icon, que indicará de onde pegar a imagem que mostraremos junto ao <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 com uma linha de Javascript este atributo se converterá numa imagem alojada dentro do <select />.

MSDropDown.init();

Se você quer ver uma demo de como ficaria, podes dar uma olhada clicando aqui – Via anieto2k.com.

Voltar
Categorias:

2 thoughts on “Javascript Image Combobox, dar vida nas suas select

  1. Pingback: Javascript Image Combobox, dar vida nas suas select | Portal Mie Magazine

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Aviso: Todo e qualquer texto publicado na internet através deste sistema não reflete, necessariamente, a opinião deste site ou do(s) seu(s) autor(es). Os comentários publicados através deste sistema são de exclusiva e integral responsabilidade e autoria dos leitores que dele fizerem uso. O autor deste site reserva-se, desde já, o direito de excluir comentários e textos que julgar ofensivos, difamatórios, caluniosos, preconceituosos ou de alguma forma prejudiciais a terceiros. Textos de caráter promocional ou inseridos no sistema sem a devida identificação do seu autor (nome completo e endereço válido de email) também poderão ser excluídos.

© 2016 AlyenStudio - Todos os direitos reservados.