Criando efeito de filtragem com jQuery

Algo muito utilizando em portfólio é a opção de realizar filtro por segmento, onde você tem vários itens e quando é clicado no link, só vai mostrar as opções desse segmento. Um exemplo de utilização é quando você tem seu portfólio, que você atende vários clientes e você pode segmentá-los como Institucional, E-Commerce, entre outros. Assim o cliente só verá os trabalhos que atendam as suas necessidades.

É um efeito bem interessante e fácil de ser feito utilizando jQuery.

Primeiro, vou criar nosso HTML (colocarei apenas o conteúdo, sem a tag html, head, body)

[html]
<nav id="options">
<ul>
<li><a href="#" rel="all">Todos</a></li>
<li><a href="#" rel="php">PHP</a></li>
<li><a href="#" rel="html5">HTML5</a></li>

</ul>
</nav>
<ul id="items">
<li class="php"><a href="#"><img src="images/php-01.jpg" alt=""></a></li>
<li class="php"><a href="#"><img src="images/php-02.jpg" alt=""></a></li>
<li class="html5"><a href="#"><img src="images/php-03.jpg" alt=""></a></li>
<li class="php"><a href="#"><img src="images/html5-01.jpg" alt=""></a></li>
<li class="php"><a href="#"><img src="images/html5-02.jpg" alt=""></a></li>
<li class="html5"><a href="#"><img src="images/html5-03.jpg" alt=""></a></li>

</ul>
[/html]

Esse HTML é divido em duas parte: a parte da navegação e parte do conteúdo que será filtrado.

Na parte da navegação, é uma lista não ordenada, dentro da tag nav. Sendo que o link contém um atributo rel, o qual vamos informar o segmento que o conteúdo será filtrado. Veja que temos o valor all, que será pra exibir todo o conteúdo e temos php, e html5

A parte do conteúdo é uma lista não ordenada, sendo que os itens da lista terão uma classe informando de qual segmento elas pertencem.

Com o CSS vamos estilizar só para poder organizar a parte da navegação e do conteúdo.

[css]
#options, #items{
width:700px;
margin:0 auto;
}

#options ul{list-style:none; padding:0}
#options li{display:inline-block}
#options a{color:#333; }

#items{list-style: none; padding:0}
#items li{display:inline-block}
[/css]

Basicamente removemos o bullets e definimos uma largura e também colocamos para exibido lado a lado.

Agora vamos ao jQuery, o código estará comentado:

[javascript]
$(function() {
/**
* Atribui o evento click ao link #options a
* Ao disparar o evento, é executado uma função anônima
*/
$("#options a").click(function() {
/**
* Definimos uma variavel, que recebe
* O valor do atributo rel
*/
var type = $(this).attr(‘rel’);
/**
* Verificamos se o valor do rel
* é diferente de all
*/
if(type !== ‘all’){
/**
* Aqui selecionamos os itens que tem a classe
* igual do atributo rel
* Usamos o animate, para criar animação em atributos do CSS
* que no caso é a largura, e opacidade.
* No caso, se tiver oculto, definimos com largura com valor 150,
* opacidade valor 1
**/
$("#items li."+type).animate({‘width’ : 150, ‘opacity’ : 1});
/**
* Aqui fazemos a mesma seleção, sendo usando :not,
* assim vamos selecionar os itens, que forem direrente
* do valor do atributo rel
* Usamos o animate, para definir o valor de largura como 0, e opacidade 0
*/
$("#items li:not(."+type+")").animate({‘width’ : 0, ‘opacity’ : 0});
}else{
/**
* Caso o atributo rel do link clicado for all
* ele vai exibir todos os itens novamente
* definimos a largura, e a opacidade como 1
*/
$("#items li").animate({‘width’ : 150, ‘opacity’ : 1});
}
/**
* Retorna como false, anular a ação padrão do link
*/
return false;
});
});
[/javascript]

O conteúdo todo ficará assim:

[html]
<!DOCTYPE html>
<html>
<head>
<title>Efeito de Filtragem com jQuery</title>
<meta charset="UTF-8">
<style type="text/css">
#options, #items{
width:700px;
margin:0 auto;
}
#options ul{list-style:none; padding:0}

#options li{display:inline-block}
#options a{color:#333; }

#items{list-style: none; padding:0}

#items li{display:inline-block}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
/**
* Atribui o evento click ao link #options a
* Ao disparar o evento, é executado uma função anônima
*/
$("#options a").click(function() {
/**
* Definimos uma variavel, que recebe
* O valor do atributo rel
*/
var type = $(this).attr(‘rel’);
/**
* Verificamos se o valor do rel
* é diferente de all
*/
if(type !== ‘all’){
/**
* Aqui selecionamos os itens que tem a classe
* igual do atributo rel
* Usamos o animate, para criar animação em atributos do CSS
* que no caso é a largura, e opacidade.
* No caso, se tiver oculto, definimos com largura com valor 150,
* opacidade valor 1
**/
$("#items li."+type).animate({‘width’ : 150, ‘opacity’ : 1});
/**
* Aqui fazemos a mesma seleção, sendo usando :not,
* assim vamos selecionar os itens, que forem direrente
* do valor do atributo rel
* Usamos o animate, para definir o valor de largura como 0, e opacidade 0
*/
$("#items li:not(."+type+")").animate({‘width’ : 0, ‘opacity’ : 0});
}else{
/**
* Caso o atributo rel do link clicado for all
* ele vai exibir todos os itens novamente
* definimos a largura, e a opacidade como 1
*/
$("#items li").animate({‘width’ : 150, ‘opacity’ : 1});
}
/**
* Retorna como false, anular a ação padrão do link
*/
return false;
});
});
</script>
</head>
<body>

<nav id="options">
<ul>
<li><a href="#" rel="all">Todos</a></li>
<li><a href="#" rel="php">PHP</a></li>
<li><a href="#" rel="html5">HTML5</a></li>

</ul>
</nav>
<ul id="items">
<li class="php"><a href="#"><img src="images/php-01.jpg" alt=""></a></li>
<li class="php"><a href="#"><img src="images/php-02.jpg" alt=""></a></li>
<li class="html5"><a href="#"><img src="images/php-03.jpg" alt=""></a></li>
<li class="php"><a href="#"><img src="images/html5-01.jpg" alt=""></a></li>
<li class="php"><a href="#"><img src="images/html5-02.jpg" alt=""></a></li>
<li class="html5"><a href="#"><img src="images/html5-03.jpg" alt=""></a></li>
</ul>

</body>
</html>

[/html]

Você pode ver o efeito funcionando aqui: Demo

Espero que tenham gostado e até a próxima.

9 thoughts on “Criando efeito de filtragem com jQuery

  1. David estou precisando de uma ajuda no seu codigo poderia me da uma luz ?

    O meu problema e que se eu ultilizar esse codigo para mais de uma filtragem na mesma pagina ele vai atualizar de todas as outras que chamei tambem e nao da parte em que clickei talvez a forma
    correta seria usando this para identifcar qual rel=”todos” ele devia atualizar.

    1. Blz Matheus. Vc precisa modificar os elementos de seleção, q seria o item de navegação : que seria o #options; e tbm os itens que terão os elementos : #items

      Vc pode criar uma função para abstrair isso, dessa forma, vc só vai modificar mesmo é o CSS pra os novos elementos. Veja no link, um exemplo do código em javascript

      http://pastebin.com/Pm63G3YB

  2. David ao ultilizar uma div2 com as mesmas propriedades da div1 ficaria meio “porco” o codigo teria como fazer ultilizando so uma div e ele identificar ? nao manjo muito de jquery. Enfim parabens pelo site muito bem explicado.

    1. Matheus, vc não precisa duplicar o CSS, por exemplo, pra isso pode add uma classe nos elementos. e usar o ID apenas como identificador. Veja que coloquei #options2, apenas como exemplo, mas vc pode atribuir um nome mais semântico. A lance é ter identificadores individuais apenas pra saber os itens que pertencem aquela ação.

    1. Exemplo, quando temos um grupo de elementos, que compartilha a mesma configuração, a gente utiliza as classes, já que o Id tem q ser um elemento único na página.

      O que disse, foi remover a estilização do ID, e atribuir a uma classe. Veja o link do HTML:

      http://pastebin.com/pFHbdEFC

      E o CSS, ficaria assim:

      [css]
      .nav-option, .item-option{
      width:700px;
      margin:0 auto;
      }

      .nav-option ul{list-style:none; padding:0}
      .nav-option li{display:inline-block}
      .nav-option a{color:#333; }

      .item-option{list-style: none; padding:0}
      .item-option li{display:inline-block}
      [/css]

      VEja que removi o id’s pra definir o CSS, e usei as classes, pra não ter q duplicar o código CSS.

Deixe uma resposta para Fabiano Cancelar resposta

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