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)

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

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.

#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}

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:

 $(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;
                });
            });

O conteúdo todo ficará assim:

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

Você pode ver o efeito funcionando aqui: Demo

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




Se o conteúdo foi relevante para você, e desejar, você pode incentivar fazendo uma doação.

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:

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

      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 Matheus Cancelar resposta

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