Quando desenvolvemos plugins em jQuery devemos atender a uma série de normas básicas para que sejam bem criados e possam funcionar em qualquer âmbito. Porém, além disso, temos uma série de padrões de desenvolvimento que devemos seguir de maneira opcional para facilitar a nossa vida e a de outros desenvolvedores que possam utilizar nossos plugins.

Uma das tarefas típicas que realizaremos é a criação de um sistema para carregar opções com as quais configurar o comportamento dos plugins. O plugin receberá estas opções como parâmetro quando o invocarmos inicialmente. Nós, como desenvolvedores do plugin, teremos que definir quais vão ser essas opções de configuração e que valores terão por padrão.

A ajuda do site de jQuery para a criação de plugins sugere a maneira com que realizar o processo de configuração do plugin, por meio de um objeto de "options", que nos facilitará bastante a vida.

Por que são interessantes os options em plugins

Já conhecemos a ideia que há por detrás da carga de opções nos plugins, que estes sejam mais configuráveis e portanto mais versáteis. Porém, vamos tentar dar um exemplo mais claro sobre como essas opções podem tornar os plugins mais versáteis.

Imaginemos um plugin para mostrar uma caixa de diálogo como as que fazemos com jQuery UI.

Essas caixas de diálogo permitem mostrar mensagens em uma camada emergente. Essa caixa poderia ter diversos parâmetros para configurá-la, como sua altura, largura, título da caixa, etc. Poderíamos enviar todos esses parâmetros ao registrar a caixa, com um código como este:

$("#camada").criarCaixa(400, 200, "titulo", ...);

Porém, isso não é prático porque o usuário deveria indicar todos os parâmetros para criar a caixa, ou pelo menos se não indica uns não poderia indicar outros que estão detrás na lista. Em seguida, no código do plugin, o desenvolvedor deveria comprovar que parâmetros são indicados, um a um, e dar-lhes valores por padrão se não foram indicados, etc. Tudo isso ampliaria demais o código fonte.

Então, o que se costuma fazer ao registrar o plugin, é indicar uma série de dados com notação de objeto:

$("#camada").criarCaixa({
   titulo: "titulo",
   largura: 400,
   altura: 200,
   ...
});

O desenvolvedor do plugin colocará no código fonte um objeto com as variáveis de configuração e seus valores por padrão. Em seguida, quando se crie o plugin, o misturará com o objeto de options enviado por parâmetro, com uma única sentença, com o que obterá rapidamente o objeto completo de configuração do plugin que deve ser aplicado.

Definir opções por padrão no código do plugin

Com o código seguinte podemos definir as variáveis de configuração por padrão de um plugin e combiná-las com as variáveis de options enviadas por parâmetro ao invocar o plugin.

jQuery.fn.meuPlugin = function(qualquerCoisa, opcões) {
   //Defino umas opções por padrão
   var configuração = {
      dado1: "lo que sea",
      dado2: 78
   }
   //extendo as opções por padrão com as recebidas
   jQuery.extend(configuração, opções);

   //resto do plugin
   //onde temos a variável configuração para personalizar o plugin
}

A função principal do plugin recebe dois parâmetros, um "qualquerCoisa" e outro "opções". O primeiro supomos que é algo que necessita o plugin, mas a configuração, que é o que nos importa agora, foi recebido no parâmetro "opções".

Já dentro da função do plugin, se define o objeto com as opções de configuração, com seus valores por padrão, em uma variável chamada "configuracao".

Na linha seguinte se misturam os dados das opções de configuração por padrão e as recebidas pelo plugin ao ser inicializado. Em seguida poderemos acessar por meio da variável "configuracao" todas as opções do plugin que vai ser iniciado.

Invocar o plugin enviando o objeto de opções

Agora podemos ver o código que utilizaríamos para invocar o plugin passando as opções que desejamos:

$("#elemento).meuPlugin({
   dado1: "Ola amigos!",
   dado2: true
});

Ou poderíamos enviar só algum dos dados de configuração, para que o resto seja tomado por padrão:

$("<div></div>").meuPlugin({
   dado2: 2.05
});

Ou não enviar nenhum dado ao criar o plugin para utilizar os valores por padrão em todas as opções de configuração.

$("p").meuPlugin();

Conclusão sobre a configuração de plugins com o objeto de opções

Até o momento não vimos mais que um código parcial do que seria um plugin com options para sua configuração. Porém, esperamos já ter esclarecido algumas dúvidas. Não obstante, veremos melhor como funciona tudo por meio de um exemplo em um artigo seguinte.

Continuar a leitura com o exercício Plugin Tip com opções em jQuery.