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.
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.
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
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.
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.
Puts cara nao entendi como disse to aprendendo jquery. Como assim adicionar uma classe.
Exemplo do nav
http://pastebin.com/zAXSPB0K
tipo isso ? lembrando que o options2 nao tem nada no css
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.
Valeu por ajudar cara =D consegui!
David valew pelo tutorial
surgir uma duvida se eu quiser add display none como teria q fazer
Fabiano, poderia fazer assim:
https://jsfiddle.net/pgeyLuar/