Faz pouco tempo publicamos um artigo em CriarWeb.com sobre um plugin para mostrar um tip com uma mensagem que apareceria em uma camada ao passar o mouse sobre um elemento quente. Isso é o que chamamos um tip e o explicamos no artigo Plugin jQuery para fazer um Tip simples.

Agora vamos fazer uma modificação nesse plugin para implementar uma serie de opções, que nos permitirão configurar de uma maneira mais versátil o comportamento do plugin. As opções que vamos implementar serão as seguintes:

• Velocidade da animação de mostrar e ocultar o tip
• Animação a utilizar para mostrar o tip
• Animação a utilizar para ocultar o tip
• Classe CSS para a camada do tip

Todas essas opções se definem, junto com os valores por padrão que vão tomar, ao criar o código do plugin. No artigo anterior já explicamos de maneira geral como funciona o sistema de options em plugins, que vamos utilizar a continuação.

Começamos por especificar, com notação de objeto, as opções de configuração por padrão para o plugin:

var configuracao = {
   velocidade: 500,
   animacaoMostra: {width: "show"},
   animacaoOculta: {opacity: "hide"},
   classeTip: "tip"
}

Agora vejamos o início do código do plugin, onde devemos observar que na função que define o plugin se estão recebendo dois parâmetros. O primeiro é o texto do tip, que necessitamos para criar a camada do tip (Este parâmetro já aparecia no código do plugin do artigo anterior). O segundo são as opções específicas para configurar o plugin.

jQuery.fn.criaTip = function(textoTip, opcoes) {
   //opcoes por padrao
   var configuracao = {
      velocidade: 500,
      animacaoMostra: {width: "show"},
      animacaoOculta: {opacity: "hide"},
      classeTip: "tip"
   }
   //extendo as opcoes por padrao com as opcoes do parametro.
   jQuery.extend(configuracao, opcoes);
   
   this.each(function(){
      //código do plugin
   });
});

Método jQuery.extend()

Talvez neste código, o que mais nos chame a atenção seja o lugar onde extendo as opções por padrão definidas na variável "configuracao", com as opções específicas para o plugin específico, recebidas por meio do parâmetro "opcoes".

jQuery.extend(configuracao, opcoes);

Esta sentença é uma chamada ao método extend() que pertence a jQuery. Esta função recebe qualquer número de parâmetros, que são objetos, e coloca as opções de todos no primeiro. A seguir, depois da chamada a extend(), o objeto do primeiro parâmetro terá suas propriedades mais as propriedades do objeto do segundo parâmetro. Se algumas das opções tinham o mesmo nome, ao final o valor que prevalece é o que havia no segundo parâmetro. Se tiverem dúvidas com respeito a este método, leiam o artigo jQuery.extend().

Assim, podemos ver como com extend() as propriedades por padrão do plugin se combinam com as que sejam enviadas nas opções. A seguir, no código do plugin, poderemos acessar as propriedades através da variável configuração, um ponto e o nome de propriedade que queiramos acessar.

configuracao.velocidade

Código completo do plugin tip com opções

Vejamos todo o código de nosso primeiro plugin em implementar o sistema de opções:

jQuery.fn.criaTip = function(textoTip, opcoes) {
   var configuracao = {
      velocidade: 500,
      animacaoMostra: {width: "show"},
      animacaoOculta: {opacity: "hide"},
      classeTip: "tip"
   }
   jQuery.extend(configuracao, opcoes);
   
   this.each(function(){
      elem = $(this);
      var meuTip = $('<div class="' + configuracao.classeTip + '">' + textoTip + '</div>');
      $(document.body).append(meuTip);
      elem.data("camadatip", meuTip);
      
      elem.mouseenter(function(e){
         var meuTip = $(this).data("camadatip");
         meuTip.css({
            left: e.pageX + 10,
            top: e.pageY + 5   
         });
         meuTip.animate(configuracao.animacaoMostra, configuracao.velocidade);
      });
      elem.mouseleave(function(e){
         var meuTip = $(this).data("camadatip");
         meuTip.animate(configuracao.animacaoOculta, configuracao.velocidade);
      });
   });
   
   return this;
};

Invocar o plugin com ou sem as opções de configuração

Para terminar, vamos invocar o plugin do tip com opções, porém vamos fazê-lo de dois modos, um com as opções por padrão e outro com opções específicas.

Assim se chamaria o plugin com as opções por padrão:

$("#elemento1").criaTip("tudo bem...");

Em realidade, estamos passando um parâmetro, mas não são as opções, mas o texto que tem que aparecer no tip. Como não se indicam opções, já que não há segundo parâmetro, se tomam todas as definidas por padrão no plugin.

As opções, como se pode observar no código do plugin, deveriam ser enviadas em um segundo parâmetro quando se chama o plugin, tal como se pode ver a continuação:

$("#elemento2").criaTip("Outro teste...", {
   velocidade: 1000,
   classeTip: "outroestilotip",
   animacaoMostra: {
      opacity: "show",
      padding: '25px',
      'font-size': '2em'
   },
   animacaoOculta: {
      height: "hide",
      padding: '5px',
      'font-size': '1em'
   }
});

Agora, indicamos várias opções específicas, que se levarão em conta ao criar o plugin com este segundo código.

Para terminar, deixamos um link para ver o exemplo em funcionamento.