Na aula de ontem com o @eduardobona foi passado a idéia (é, sou rebelde, não ligo para a nova escrita da língua portuguesa) para um plugin que pegaria o arquivo atual, compararia com os links contidos num contêiner de menu (nav, div, ul…) e atribuiria uma classe para o mesmo, indicando a página atual. Então usando um pouco do que aprendi no último estágio e um pouco da documentação oficial do jQuery fiz um esboço do pgnAtual.
Com certeza já deve existir algum plugin deste molde, mas por ter feito um do zero durante a madrugada já vale 😛
/* pgnAtual v0.02 */(function($){ $.fn.pgnAtual = function(options) { var settings = { 'classe': 'ativo' }; if (options) { $.extend(settings,options); } var arquivo = location.href; var temp; $("a").each(function(){ temp = $(this).attr("href"); if(arquivo.indexOf(temp) != -1){ $(this).addClass(settings['classe']); } }); }; })(jQuery);
Funcionamento (simples):
A variável arquivo recebe a url atual através do location.href.
A função $().each(); varre todo o elemento a em busca dos links. A cada passagem, a variável temp é carregada com o valor do atributo href.
Em posse do caminho completo (variável arquivo) e do link (variável temp), é utilizado o método indexOf() para realizar a busca dentro da string:
arquivo.indexOf(temp);
O método acima retorna o valor -1 quando não é encontrado nenhuma ocorrência, caso contrário devolve a posição em que se inicia a string desejada, neste caso, a variável temp.
Quando a string é encontrada dentro da variável arquivo, é aplicado o estilo (automático ou passado via parâmetro na chamada do plugin) através da seguinte linha:
$(this).addClass(settings['classe']);
Chamando o plugin:
A chamada pode ser feita de duas maneiras:
$(“#elemento”).pgnAtual();
No exemplo acima, o plugin irá trabalhar com o contêiner que possui a id elemento. Ao fazer a chamada sem nenhum parâmetro adicional, a classe atribuída para o link ativo será “ativo”.
Outra maneira é com a passagem do parâmetro da classe que deverá ser atribuída:
$(“#elemento”).pgnAtual({classe:’lnk_ativo’});
Neste caso, a classe que será atribuída ao link ativo será “lnk_ativo”.
Limitações e bugs (v0.02):
- Se estiver na página principal index / default sem que o nome do arquivo esteja definido na barra de endereço, o plugin não pega.
- Por enquanto a classe é definida ao link (a), ou seja, não é aplicado ao elemento filho do contêiner. Por exemplo: se você utilizar ul / li, a classe é atribuída ao “a” presente dentro do li, não ao li em sí.
(function($){$.fn.pgnAtual=function(options){var settings={‘classe’:’ativo’};if(options){$.extend(settings,options);}var arquivo=location.href;var temp;$(“a”).each(function(){temp=$(this).attr(“href”);if(arquivo.indexOf(temp)!=-1){$(this).addClass(settings[‘classe’]);}});};})(jQuery);