Combobox em jQuery
Cansado das limitações ou do visual simples dos Combobox (ou Dropdown list) padrões da internet? Aprenda a fazer um Combobox com jQuery, e leve a modernidade para o seu website!
Neste simples tutorial, usarei o plug-in simpledropdown, que deve ser baixado aqui:
http://projetos.lucaspeperaio.com.br/dropdown-jquery/js/jquery.simpledropdown.js
Usando o plug-in Simple Drop Down
Com a ajuda deste plug-in, faremos um belo efeito num combobox, que pode ser visto abaixo:
http://projetos.lucaspeperaio.com.br/dropdown-jquery
Clique na imagem para ver o efeito
Código utilizado:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/dropdown.css" type="text/css" rel="stylesheet"/>
<!--[if lte IE 7]>
<link href="css/ie.css" type="text/css" rel="stylesheet"/>
<![endif]-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.simpledropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.simpledropdown("#dropdown");
});
</script>
</head>
<body>
<div id="dropdown">
<ul>
<li>Selecione um País</li>
<li>
<ul>
<li><a href="#">Argentina</a></li>
<li><a href="#">Brasil</a></li>
<li><a href="#">Uruguai</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Observe que, não basta apenas você copiar este código, pois não funcionará de imediato. É necessário que você baixe o plug-in (link no começo do post), e o jQuery. Caso queira baixar este exemplo que eu fiz, ai está:
Lucas Peperaio
Tenho 22 anos, sou estudante de Ciência da Computação, trabalho com desenvolvimento web há 6 anos e com hardware há 8. Nas horas vagas, sou entusiasta de Overclock, Casemod e Benchmarks, além é claro dos Games. Apaixonado por informática e pela vida, procuro compartilhar meus conhecimentos e assim, ajudar as pessoas.
4 Comentários › Deixe o seu
Siga-me!
Assim você poderá ficar ligado nos novos posts do Blog e do Youtube
Oi amigo tudo bem? Adorei o seu post mas estou com um pequeno problemas e queria uma ajuda sua. Estava dando uma olhada e tenho a situação. Eu faço uma busca dinâmica no meu banco de dados e trago o nome, email e telefone. Com isto eu tenho uma tabela com 4 colunas, sendo elas:
NOME | EMAIL | TELEFONE | AÇÃO
Ele vai trazendo pra mim todos os registros, o que acontece é que na coluna AÇÃO colocasse em DROP, funcionou somente para a primeira linha, das segundas linhas pra frente não me mostra o combo certinho, me mostra somente os dados dentro do DIV um abaixo do outro. Sabe como resolver isto, eu gostaria que em cada linha o COMBOBOX aparecesse certinho para cada linha.
Aguardo….
Tem como usar essa soluçao do Combobox em jQuery em um site feito em WordPress? tipo tenho um site que eu precioso que o meu cliente selecione uma ESPECIALIDADE ( cardiologia, neurologia…) depois ele seleciona o ESTADO (mg, ba, rj…) logo em seguida ele puxa a CIDADE ( belo horizonte, salvador…) quando ele clicar em LISTAR deve aparecer o resultado da busca que seria na verdade os medicos ou hospitais referentes. O site é feito em WordPress tem como implementar isso nele? Obrigado pela atenção.
Respondendo as duas perguntas:
@Edmar:
Você está preenchendo o combobox com a tag li?
@Geovani:
Tem sim, seria a mesma coisa que usar em um site comum
O link esta quebrado, http://archive.plugins.jquery.com/files/jquery.simpledropdown.v1.2.zip.
Muito bom o blog, parabens!