Meu primeiro plugin para o jQuery: pgnAtual

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