#desenvolvimento

Dropdown animado com Twitter Bootstrap e jQuery


Olá pessoas.

Neste post iremos fazer um dropdown com efeito slideToggle, mas acredito que com estes passos seja possível aplicar vários outros efeitos.

Eu sei que existem inúmeros plugins que fazem isto, mas queria fazer algo mais simples utilizando apenas jQuery e o Bootstrap.

Então vamos preparar a estrutura para criar o dropdown:

  • Baixe o jQuery, o less o Bootstrap.
  • Crie uma pasta chamada dropdown.
  • Crie uma pasta chamada javascript dentro da pasta dropdown.
  • Copie jquery-1.7.2.min.js para a pasta javascript dentro da pasta dropdown.
  • Copie less-1.3.0.min.js para a pasta javascript dentro da pasta dropdown.
  • Crie uma pasta chamada twitter-bootstrap dentro da pasta dropdown.
  • Extraia o arquivo baixado do Bootstrap e copie as pastas img, js e less para dentro de dropdown/twitter-bootstrap.
  • Crie um arquivo index.html dentro da pasta dropdown.
  • Adicione as referências aos arquivos CSS.
<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/bootstrap.less">
<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/responsive.less">
  • Adicione as referências aos arquivos Javascript.
<script src="javascript/less-1.3.0.min.js"></script>
<script src="javascript/jquery-1.7.2.min.js"></script>
<script src="twitter-bootstrap/js/bootstrap-dropdown.js"></script>
  • Adicione o código abaixo dentro da tag body.
<div class="btn-toolbar">
   <!-- Div para agrupar os botões com texto e com ícone -->
   <div class="btn-group">
      <button id="btn-selecione" class="btn btn-large dropdown-toggle span4" style="text-align: left;">
         Selecione
      </button>
      <button id="btn-caret" class="btn btn-large dropdown-toggle" data-toggle="dropdown">
         <i class="caret"></i>
      </button>
      <!-- Lista de opções -->
      <ul id="ul-dropdown-menu" class="dropdown-menu" style="width: 400px;">
         <!-- Itens -->
         <li id="item-1"><a href="#">Item 1</a></li>
         <li id="item-2"><a href="#">Item 2</a></li>
         <li id="item-3"><a href="#">Item 3</a></li>
      </ul>
   </div>
</div>
<br />
<!-- Exibição do texto referente ao item selecionado -->
<div class="row">
   <div class="alert alert-success span4">
      <span id="span-item-selecionado"></span>
   </div>
</div>
  • Agora falta criarmos o código Javascript para adicionar a aparência e os efeitos ao nosso dropdown.
<script type="text/javascript">
   $(document).ready(function () {
      // Adiciona a aparência de dropdown para os elementos que possuem a classe dropdown-toggle.
      $('.dropdown-toggle').dropdown();
   });

   // Adiciona o efeito slideToogle ao clicar nos botões.
   $('#btn-selecione, #btn-caret').click(function () {
      $('#ul-dropdown-menu').slideToggle();
   });

   // Altera os textos de acordo com o item selecionado.
   $('#ul-dropdown-menu li').click(function () {
      $("#span-item-selecionado").text($(this).text());
      $("#btn-selecione").text($(this).text());
      $('#ul-dropdown-menu').slideToggle();
   });
</script>

Com isto temos um resultado semelhante ao mostrado nas imagens abaixo:

Imagem do dropdown aberto

Dropdown aberto

Imagem do dropdown selecionado

Dropdown selecionado

Este código foi testado no Firefox 14, para baixar o código completo clique aqui.

Isso é tudo pessoal 😉

Anúncios
Padrão