Estendendo a jQuery

Keith Wood Apresentação de Dave Methvin

Novatec

Original English language edition published by Manning Publications Co., Sound View CT.#3B, Greenwich, CT 06830 USA. Copyright © 2013 by Manning Publications. Portuguese-language edition for Brazil copyright © 2013 by Novatec Editora. All rights reserved.

Edição original em inglês publicada pela Manning Publications Co., Sound View CT.#3B, Greenwich, CT 06830 USA. Copyright © 2013 pela Manning Publications. Edição em português para o Brasil copyright © 2013 pela Novatec Editora. Todos os direitos reservados. © Novatec Editora Ltda. 2013.

Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora.

Editor: Rubens Prates Tradução: Lúcia Kinoshita Revisão técnica: Aurelio Jargas Revisão gramatical: Marta Almeida de Sá Editoração eletrônica: Carolina Kuwabata ISBN: 978-85-7522-383-3 Histórico de impressões: Outubro/2013

Primeira edição

Novatec Editora Ltda.

Rua Luís Antônio dos Santos 110 02460-000 – São Paulo, SP – Brasil Tel.: +55 11 2959-6529 Fax: +55 11 2950-8869 E-mail: novatec@novatec.com.br Site: www.novatec.com.br Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec VC20130929

capítulo 1

Extensões da jQuery

Este capítulo inclui: • As origens e o propósito da jQuery • O que você pode estender na jQuery • Exemplos de extensões existentes Atualmente, a jQuery é a biblioteca JavaScript mais amplamente utilizada na web. Ela oferece diversas funções para facilitar a vida do desenvolvedor de front-end, tais como a capacidade de percorrer o DOM (Document Object Model, ou Modelo de Objetos de Documentos) HTML para encontrar os elementos com os quais você deseja trabalhar e aplicar animações a esses elementos. Além do mais, os desenvolvedores de jQuery reconhecem que ela não pode (e não deve) fazer tudo e disponibilizaram pontos de extensão que permitem a integração de funcionalidades adicionais ao processamento normal da jQuery. Essa visão contribuiu para o aumento de sua popularidade.

Neste livro, explicarei como você pode estender vários aspectos da jQuery para permitir maior reuso e facilitar a manutenção de seu código. Juntamente com o plugin padrão que opera sobre uma coleção de elementos em uma página web, você poderá criar seletores personalizados, funções utilitárias, animações personalizadas, processadores sofisticados de Ajax, eventos personalizados e regras de validação. Incluo também testes, empacotamento e documentação de seu código para garantir que outras pessoas possam tirar o máximo proveito dele também.

25

26

Estendendo a jQuery

1.1 História da jQuery O site da jQuery a define como “uma biblioteca JavaScript pequena, rápida e cheia de recursos. Ela torna muito mais simples tarefas como percorrer e manipular documentos HTML, tratamento de eventos, animações e Ajax, por meio de uma API fácil de ser usada, e que funciona em uma ampla gama de navegadores” (http://jquery.com).

A jQuery é uma biblioteca de funções JavaScript que permite acessar facilmente o DOM HTML e inspecioná-lo ou atualizá-lo, possibilitando oferecer páginas web e experiências mais dinâmicas, em consonância com o paradigma da Web 2.0. Seus principais recursos são: • Seleção de elementos usando uma sintaxe semelhante à do CSS, com extensões.

• Capacidade de percorrer elementos.

• Manipulação de elementos, incluindo remoção, atualização de conteúdo e alteração de atributos.

• Tratamento de eventos, incluindo eventos personalizados.

• Efeitos e animações.

• Suporte a Ajax.

• Um framework para estender sua funcionalidade (o assunto deste livro).

• Várias funções utilitárias.

• Suporte cross-browser, incluindo ocultar as diferenças entre os navegadores.

A jQuery é uma biblioteca de código aberto, disponível gratuitamente.

Está atualmente licenciada sob a licença MIT (http://jquery.org/license/).

Versões anteriores também estavam licenciadas sob a GNU General Public License, Versão 2 (GPLv2).

Capítulo 1 ■ Extensões da jQuery

27

1.1.1 Origens A jQuery foi inicialmente desenvolvida por John Resig e foi anunciada em janeiro de 2006, no BarCamp NYC1. Ele havia se deparado com o código do Behaviour, escrito por Ben Nolan, e havia percebido o potencial de suas ideias – usar seletores com estilo pseudo-CSS para associar funções JavaScript a vários elementos do DOM. Mas John não estava satisfeito com sua verbosidade e a falta de seletores hierárquicos2. A sintaxe sugerida por ele e a implementação subsequente se transformaram na base para a jQuery.

A listagem 1.1 mostra o código do Behaviour para associar um event handler para clique a todos os elementos li em um elemento com ID igual a example; o event handler para clique remove o item clicado. A listagem 1.2 mostra o atualmente familiar código jQuery correspondente.

Listagem 1.1 – Amostra do código do Behaviour Behaviour.register({

'#example li': function(e) {

e.onclick = function() {

this.parentNode.removeChild(this); } } });

Listagem 1.2 – Código jQuery equivalente $('#example li').bind('click', function() { $(this).remove(); });

Por que o nome jQuery? Originalmente, a biblioteca se chamava jSelect para refletir sua habilidade de selecionar elementos em uma página web.

Porém quando John deu uma verificada nesse nome na Internet, descobriu que ele já estava sendo utilizado e alterou-o para jQuery3.

1 John Resig, “BarCampNYC Wrap-up” (Balanço do BarCampNYC), http://ejohn.org/blog/ barcampnyc-wrap-up/.

2 John Resig, “Selectors in Javascript” (Seletores em Javascript), http://ejohn.org/blog/selectorsin-javascript/.

3 Comentários de John Resig, “BarCampNYC Wrap-up” (Balanço do BarCampNYC), http://ejohn.org/blog/barcampnyc-wrap-up/.

28

Estendendo a jQuery

1.1.2 Evolução Desde seu anúncio inicial, a jQuery passou por inúmeras versões incrementais, conforme mostrado na tabela 1.1 (nem todas as versões estão sendo mostradas). Ao longo dos anos, ela cresceu enormemente no que diz respeito às funcionalidades e ao tamanho.

Tabela 1.1 – Versões de jQuery (nem todas estão sendo mostradas) Versão

Data do código

Tamanho

Observações

1.0

26 de agosto de 2006

1.0.4

12 de dezembro de 2006 52.2 KB Última correção de bugs na 1.0

1.1

14 de janeiro de 2007

55.6 KB Melhorias no desempenho dos seletores

1.1.4

23 de agosto de 2007

65.6 KB jQuery pode ser renomeada

1.2

10 de setembro de 2007 77.4 KB

1.2.6

26 de maio de 2008

97.8 KB

1.3

13 de janeiro de 2009

114 KB

1.3.2

19 de fevereiro de 2009 117 KB

1.4

13 de janeiro de 2010

154 KB Melhoria no desempenho e no Ajax

1.4.1

25 de janeiro de 2010

156 KB

1.4.2 1.4.3

44.3 KB Primeira versão estável

Engine de seleção Sizzle introduzido no núcleo (core), live events e inspeção de eventos

height() e width() adicionados; parseJSON()

adicionado delegate() adicionado, melhorias no de13 de fevereiro de 2010 160 KB sempenho Módulo CSS reescrito, manipulação de 14 de outubro de 2010 176 KB metadata

1.4.4

11 de novembro de 2010 178 KB

1.5

31 de janeiro de 2011

Gerenciamento de callback disponibilizado, 207 KB reescrita do módulo Ajax, desempenho em travessia

1.5.2

31 de março de 2011

214 KB

1.6

2 de maio de 2011

227 KB

1.6.4

12 de setembro de 2011 232 KB

1.7

3 de novembro de 2011 243 KB

1.7.2

21 de março de 2012

246 KB

Melhorias significativas no desempenho das funções attr() e val(), prop() adicionado Novas APIs de eventos: on() e off(), desempenho em delegação de eventos

29

Capítulo 1 ■ Extensões da jQuery Versão

Data do código

Tamanho

Observações

Sizzle reescrito, reinvenção de animações, 253 KB mais modularidade

1.8.0

9 de agosto de 2012

1.8.3

13 de novembro de 2012 261 KB

1.9.0

14 de janeiro de 2013

261 KB

1.9.1

4 de fevereiro de 2013

262 KB Correções de bugs e de regressão

2.0.0

18 de abril de 2013

234 KB Suporte para IE 6-8 removido

1.10.0 24 de maio de 2013

267 KB

1.10.2 3 de julho de 2013

266 KB

2.0.3

236 KB

3 de julho de 2013

Reestruturação para jQuery 2.0

Sincronização de versão/recurso com a linha 2.x

Embora o tamanho da biblioteca jQuery tenha aumentado substancialmente, quando você minimiza o código (removendo comentários e espaços em branco desnecessários), ele é reduzido a aproximadamente um terço de seu tamanho original (a versão mais recente tem somente 91 KB). Quando essa versão minificada é obtida da Internet em um formato gzip, ela é reduzida novamente a cerca de um terço, resultando em um custo de download de cerca de 32 KB para a versão mais recente. Ao usar um dos CDNs (Content Delivery Networks, ou Redes de Fornecimento de Conteúdo) disponíveis, o arquivo já poderá estar em cache no cliente, fazendo com que o download não seja sequer necessário.

Usando CDNs Para fazer o download da jQuery de um dos CDNs que a hospedam, inclua uma das tags script mostradas a seguir. Pode ser que você precise alterar a versão especificada da jQuery, de modo a atender a seus requisitos.

Usando o CDN de jQuery disponibilizado pela MediaTemple <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Você pode incluir o plugin jQuery Migration desse site também, para assistência na transição de versões mais antigas de jQuery para jQuery 1.9 ou mais recente. <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

30

Estendendo a jQuery

Usando o CDN do Google a <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>

Todas as versões de jQuery estão disponíveis no CDN do Google, mas a jQuery não controla esse CDN, e poderá haver um atraso entre o lançamento de uma versão de jQuery e sua disponibilidade nesse local.

Usando o CDN da Microsoft b <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>

Todas as versões de jQuery estão disponíveis no CDN da Microsoft, mas a jQuery não controla esse CDN, e poderá haver um atraso entre o lançamento de uma versão de jQuery e sua disponibilidade nesse local. a. Google Developers, “Google Hosted Libraries – a.Developer’s Guide” (Bibliotecas hospedadas no Google – Guia do Desenvolvedor), https://developers.google.com/ speed/libraries/devguide#jquery. b. ASP.NET, “Microsoft Ajax Content Delivery Network” (Rede de Fornecimento de Conteúdo do Microsoft Ajax), http://www.asp.net/ajaxlibrary/cdn.ashx.

Atualmente, a jQuery inclui o engine de seleção Sizzle, que provê a capacidade fundamental de encontrar no DOM os elementos sobre os quais você deseja operar. Sempre que possível, o Sizzle delega esses seletores para a implementação do navegador subjacente, mas recorre ao JavaScript quando necessário para garantir uma experiência comum entre todos os principais navegadores.

1.1.3 Nos dias de hoje A jQuery tornou-se a biblioteca JavaScript mais popular da Internet e vem sendo adotada por muitas organizações e indivíduos para uso em seus websites. Ela tem o suporte formal da Microsoft e acompanha o pacote Visual Studio. O BuiltWith informa que mais de 60% dos 10 mil sites principais usam jQuery, e o mesmo ocorre com mais de 50% de 1 milhão dos sites principais4. O W3Techs informa que a jQuery é usada em 55% de todos os sites e em 90% daqueles que usam qualquer biblioteca JavaScript.5 4 BuiltWith, “jQuery Usage Statistics” (Estatísticas sobre uso da jQuery), http://trends. builtwith.com/javascript/jQuery.

5 W3Techs, “Usage of JavaScript libraries for websites” (Uso de bibliotecas JavaScript para websites), http://w3techs.com/technologies/overview/javascript_library/all.

Capítulo 1 ■ Extensões da jQuery

31

A comunidade de desenvolvedores de plugins é próspera, e a maioria disponibiliza seus códigos gratuitamente, dentro do espírito da biblioteca jQuery subjacente. Você pode procurar os módulos apropriados na web ou usar o repositório “oficial” de plugins jQuery, reorganizado recentemente (http://plugins.jquery.com). Alguns plugins são ótimos, com código robusto, boa documentação e exemplos. Outros não são tão bons assim – são difíceis de ser usados, contêm bugs e/ou documentação precária.

Após ter lido este livro e aplicado seus princípios, seus plugins deverão se enquadrar na primeira categoria.

Você também poderá encontrar muitas atividades em andamento nos fóruns de jQuery (https://forum.jquery.com), com mais de 250 mil respostas para mais de 110 mil perguntas. Nesses fóruns, você encontrará seções especiais, dedicadas ao uso e ao desenvolvimento de plugins jQuery.

O desenvolvimento atual da jQuery atualmente é gerenciado pela jQuery Foundation (http://jquery.org). Ela foi constituída em setembro de 2009 para cuidar de todos os projetos jQuery, incluindo jQuery Core, jQuery UI, jQuery Mobile, Sizzle e QUnit. Contribuições e doações feitas pela comunidade jQuery são responsáveis por prover a base financeira para esse suporte.

1.2 Estendendo a jQuery Se a jQuery oferece tantas funcionalidades, por que você iria querer estendê-la? Para manter o tamanho do código da jQuery administrável, somente as funções que são genéricas e largamente usadas estão incluídas no código do núcleo (embora haja discussões sobre o que é usado e útil). Acesso e modificação básicos de elementos, tratamento de eventos, animação e tratamento de Ajax são disponibilizados como funcionalidades necessárias à maioria dos usuários, enquanto capacidades mais especializadas são deixadas para que outros as incluam.

Felizmente, a equipe da jQuery reconhece que o núcleo da jQuery não pode fazer de tudo e, sendo assim, eles disponibilizaram diversos pontos de integração a partir dos quais outras pessoas podem estender as funcionalidades da jQuery, ao mesmo tempo que se beneficiam da infraestrutura e das capacidades existentes.

32

Estendendo a jQuery

Além de estender a jQuery para prover funcionalidades adicionais, empacotar sua extensão na forma de plugin permite que você reutilize facilmente essas capacidades em outras páginas web. Como resultado, você terá somente uma cópia do código para ser mantida, e qualquer melhoria será imediatamente aplicada, onde quer que ela seja usada. Você poderá testar o código de seu plugin isoladamente, em circunstâncias controladas, para garantir que ele funcionará conforme esperado.

1.2.1 O que você pode estender?

Assim como a biblioteca principal disponibiliza diversos recursos, você encontrará inúmeras maneiras de estender a jQuery. As opções abordadas neste livro estão listadas nas seções a seguir.

Seletores e filtros Seletores e filtros jQuery permitem identificar e reunir os elementos da página web sobre a qual você deseja operar. Embora seletores padrões com base em nome de nó, ID e classe estejam incluídos na jQuery, há espaço para a adição de seletores de pseudoclasse (estendendo as pseudoclasses definidas no CSS), que permitem filtrar uma seleção previamente efetuada de modo consistente e sucinto. Você também pode adicionar filtros de conjunto que têm conhecimento de toda a coleção de elementos previamente selecionados e a posição de cada um nessa lista. O capítulo 3 explica como criar esses seletores.

Ao criar um seletor personalizado, o processo de seleção pode ser consolidado em um só local, facilitando o reúso desse código em outros lugares, o que garante uma implementação consistente em todos os seus projetos. Também facilita a manutenção do seletor e a aplicação imediata de qualquer correção de bugs ou melhorias a todas as instâncias.

Plugins de coleção Plugins de coleção são funções que podem ser aplicadas a coleções de

elementos, obtidos por um seletor. Essas funções são aquelas em que a maioria das pessoas pensa quando o termo plugin jQuery é usado, e elas constituem a maior parte dos plugins de terceiro disponíveis. As novas

Capítulo 1 ■ Extensões da jQuery

33

capacidades fornecidas por um plugin de coleção estão limitadas somente pela sua imaginação e podem variar de fazer alterações simples de atributos até provocar mudanças comportamentais ou monitorar eventos sobre esses elementos, ou ainda substituir totalmente o componente original por uma implementação alternativa.

O capítulo 4 apresenta uma série de diretrizes a serem usadas na criação de seu plugin, e o capítulo 5 descreve o framework de plugin que utilizo para meus plugins e como ele implementa essas diretrizes. As diretrizes encapsulam abordagens referentes às melhores práticas para escrita de seus plugins, contribuindo para que ele se integre bem à jQuery, ao mesmo tempo que reduz a possibilidade de um código externo provocar interferências ou que ele venha a afetar outros códigos.

Um componente fundamental na criação de seu plugin consiste em testar sua funcionalidade, e usar uma ferramenta para testes de unidade permite executar testes em seu código, rápida e consistentemente, provando que ele funciona conforme esperado. Uma vez que seu código esteja pronto para ser liberado, é necessário que ele seja empacotado para distribuição, para que outras pessoas possam obtê-lo facilmente e integrá-lo em seus próprios projetos. Você deve também disponibilizar uma página web que demonstre os recursos de seu plugin para permitir que usuários em potencial vejam como ele funciona e o que ele pode fazer. E você deve disponibilizar documentação para todos os aspectos de seu plugin para permitir que outras pessoas tirem o máximo proveito dele. O capítulo 7 discute esses aspectos do desenvolvimento do plugin.

Plugins de função Plugins de função são funções utilitárias que não operam diretamente sobre

coleções de elementos. Eles oferecem capacidades adicionais ao framework da jQuery e, em geral, usam a própria funcionalidade da jQuery para executar suas tarefas. O capítulo 6 fornece detalhes sobre como adicionar essas funções utilitárias.

Exemplos desses plugins de função incluem suporte para envio de mensagens de depuração a um console para monitorar a execução do código ou obter e configurar valores de cookies para uma página web. Ao

34

Estendendo a jQuery

tornar essas habilidades disponíveis na forma de um plugin jQuery, você proporcionará ao usuário uma maneira familiar de invocar o código e reduzirá possíveis interferências de códigos externos. Várias das diretrizes mencionadas anteriormente também se aplicam a esses tipos de plugin, assim como os passos referentes a testes, empacotamento, demonstração e documentação do plugin.

Widgets da jQuery UI A jQuery UI “é um conjunto organizado de interações com a interface de usuário, efeitos, widgets e temas, desenvolvidos sobre a biblioteca JavaScript jQuery” (http://jqueryui.com/). Ela define um framework para widgets que permite criar plugins que funcionam de maneira consistente e que podem se beneficiar com os vários temas disponíveis para estilizar a UI. O capítulo 8 descreve o framework para widgets e como usá-lo para criar seu próprio componente.

O framework para widgets da jQuery UI também implementa as diretrizes para plugin, apresentadas no capítulo 4, e provê funcionalidades comuns a todos os widgets da jQuery UI de maneira consistente. Ao basear seu plugin nesse framework, você terá esses recursos incluídos automaticamente e poderá se concentrar na disponibilização da funcionalidade exclusiva de seu widget. Se você aplicar as classes definidas no estilizador ThemeRoller a seu novo widget, ele estará visualmente integrado, de imediato, a outros componentes da jQuery UI e terá a aparência modificada, caso um novo tema seja aplicado.

Vários dos widgets da jQuery UI dependem de ações relacionadas a arrastar o mouse para implementação de suas funcionalidades, e a equipe da jQuery UI reconhece a importância dessa interação. Ao fazer seu widget estender o módulo Mouse da jQuery UI, em vez do Widget básico, você terá suporte para operações de arrastar, de maneira completa, com condições personalizáveis para iniciar a operação de arrastar, e poderá, novamente, focar na implementação da funcionalidade de seu próprio widget. O capítulo 9 descreve como usar o módulo Mouse para criar um widget que dependa do uso de mouse.

Capítulo 1 ■ Extensões da jQuery

35

Efeitos da jQuery UI A jQuery UI também disponibiliza um conjunto de efeitos que podem ser aplicados a elementos que estão em sua página. Você pode usar muitos deles para mostrar ou ocultar um elemento, como, por exemplo, blind, clip, fold e slide. Alguns fazem sua atenção ser voltada para um elemento, como highlight e pulsate. Você pode definir seu próprio efeito e aplicá-lo aos elementos, como faria com os efeitos padrões. O capítulo 10 mostra como criar novos efeitos de UI.

Propriedades de animação A jQuery disponibiliza um framework de animação que pode ser aplicado a qualquer atributo de estilo de elemento que tenha um valor numérico simples. Ele permite que você varie esse atributo de um valor a outro, controlando a duração da mudança e os passos incrementais nesse intervalo. Porém, se o valor que você deseja animar não corresponde a um valor numérico simples, será necessário que você mesmo implemente a funcionalidade. Por exemplo, a jQuery UI disponibiliza um módulo que permite fazer a animação de uma cor para outra. No capítulo 11, criaremos um animador para um valor complexo de atributo.

Processamento de Ajax A funcionalidade de Ajax da jQuery é uma de suas vantagens mais evidentes, tornando incrivelmente fácil a tarefa de carregar dados remotos e, em seguida, processá-los. Como parte da chamada Ajax, você poderá identificar que tipo de dado é esperado pelo callback bem-sucedido: texto simples, HTML, XML, JSON. Um processo de conversão ocorrerá nos bastidores para transformar a cadeia de bytes recebida pela chamada remota em um formato apropriado. Você poderá adicionar suas próprias transformações para possibilitar a geração de formatos especializados diretamente, identificando o tipo que você quer que seja retornado. O capítulo 12 contém detalhes sobre como estender o processamento de Ajax para tratar um formato comum de arquivo diretamente.

36

Estendendo a jQuery

Tratamento de eventos As capacidades de tratamento de eventos da jQuery permitem associar vários event handlers aos elementos para que respondam às interações com o usuário, a eventos de sistema e a triggers personalizados. A jQuery provê vários hooks (ganchos) que permitem criar suas próprias definições de eventos e pontos de triggers, resultando em um código que será consistente em relação às funcionalidades existentes. O capítulo 13 descreve a implementação de um novo evento para simplificar as interações com o mouse.

Regras de validação O plugin Validation, escrito por Jörn Zaefferer, é amplamente utilizado para validar entradas de usuário do lado do cliente, antes de submeter os valores preenchidos ao servidor. Embora o plugin não faça parte da funcionalidade do núcleo da jQuery, ele também disponibiliza pontos de extensão que permitem criar regras personalizadas de validação e aplicá-las como parte do processamento existente. O capítulo 14 demonstra como criar suas próprias regras de validação e integrá-las ao comportamento já existente.

1.3 Exemplos de extensões Centenas de plugins jQuery estão disponíveis na web para melhorar a experiência em suas páginas web. Os números são um testemunho do poder e da simplicidade da própria jQuery, e da visão dos desenvolvedores em prover pontos de extensão que permitam que ela seja incrementada.

Não é possível descrever todos esses plugins neste livro, mas as seções a seguir oferecem uma amostra resumida para mostrar o alcance das possibilidades.

1.3.1 jQuery UI O projeto jQuery UI (http://jqueryui.com/) foi desenvolvido sobre a biblioteca jQuery principal, na forma de uma coleção de plugins. Ela inclui diversos widgets, incluindo Tabs (Abas), Datepicker (Seletor de Datas) e

Capítulo 1 ■ Extensões da jQuery

37

Dialog (Diálogo) – veja a figura 1.1, bem como vários comportamentos de UI, como Draggable (Arrastar) e Droppable (Soltar). Além disso, ela provê várias animações a serem usadas para mostrar ou ocultar elementos, ou para chamar a atenção para eles.

Figura 1.1 – Amostra de widgets e estilos da jQuery UI.

A jQuery UI usa seu próprio framework de widgets para oferecer uma base consistente para seus componentes de UI. O framework administra a criação e destruição de widgets, a manutenção do estado e as interações com o mouse. Os capítulos 8 e 9 analisam o framework para widgets e descrevem o processo de criar seus próprios widgets com base nele.

38

Estendendo a jQuery

O projeto faz a integração de seus componentes e comportamentos com a ferramenta ThemeRoller (http://jqueryui.com/themeroller/) para simplificar a geração de um tema consistente que defina a aparência de todos os seus widgets.

Inúmeras demonstrações e uma documentação abrangente acompanham a jQuery UI, permitindo que você tire o máximo proveito de suas capacidades. Em virtude do design modular do pacote, você pode criar um download personalizado que inclua somente as partes que julgar necessárias. Opcionalmente, o pacote pode ser carregado a partir de um dos CDNs nos quais ele está hospedado, juntamente com os temas que são padrões.

1.3.2 Validation Conforme mencionado anteriormente, o plugin Validation6 de Jörn Zaefferer é amplamente utilizado para prover validação do lado do cliente (ver figura 1.2). Ele simplifica a atribuição de regras de validação aos elementos e administra seus estados e as mensagens de erro associadas.

Seu objetivo é não ser obstrutivo – gerando um erro somente quando o formulário for submetido ou quando um campo for modificado.

As regras podem ser especificadas inline (em linha) na forma de atributos para cada campo, no código para elementos nomeados, ou por meio de uma função associada a uma seleção jQuery. Várias regras de validação prontas estão disponíveis, incluindo required, digits, date, email e url. Algumas regras de validação podem receber parâmetros adicionais que modificam seu comportamento, como, por exemplo, minlength e maxlength.

Pode-se fazer com que as regras sejam dependentes do estado de outros elementos da página.

Esse plugin disponibiliza seu próprio ponto de extensão, permitindo definir regras personalizadas de validação que podem, então, ser aplicadas aos elementos especificados, da mesma maneira que as regras já existentes.

O capítulo 14 descreve como criar essas regras.

6 jQuery Validation Plugin, http://jqueryvalidation.org/.

Capítulo 1 ■ Extensões da jQuery

39

Figura 1.2 – O plugin Validation em ação, mostrando diversas mensagens de erro (em itálico), resultantes de problemas na validação, juntamente com os campos afetados.

Cada regra possui uma mensagem de erro associada para ser mostrada ao usuário. Essas mensagens podem ser sobrescritas individualmente, ou podem ser traduzidas para um dos mais de 30 idiomas diferentes incluídos no pacote. Você pode controlar o posicionamento e o agrupamento de mensagens de erro por meio de opções fornecidas à chamada de inicialização.

O plugin possui extensa documentação e inclui exemplos que auxiliam você quanto à utilização. De modo geral, é um plugin bem escrito e bem documentado, além de ser bastante útil.

1.3.3 Controle deslizante gráfico Os plugins podem deixar sua página web mais sofisticada ao apresentar o conteúdo de maneira diferente e mais atraente. Por exemplo, o plugin Nivo Slider (http://nivo.dev7studios.com/) converte uma lista simples de imagens em um slideshow com várias transições entre as figuras.

40

Estendendo a jQuery

A apresentação atraente mostrada na figura 1.3 é resultante da aplicação do Nivo Slider ao HTML da listagem 1.3. Embora essa seja a apresentação padrão, ela é fácil de ser gerada e tem uma boa aparência. Conforme seria de esperar, você encontrará inúmeras opções para personalizar a aparência e o comportamento do plugin.

Figura 1.3 – O Nivo Slider em ação.

Listagem 1.3 – Marcações para um controle deslizante gráfico <div class="slider-wrapper">

<div id="slider" class="nivoSlider">

<img src="images/slide1.jpg" alt="" />

<img src="images/slide2.jpg" alt=""

title="You can add captions too..." />

<img src="images/slide3.jpg" alt="" />

</div> </div>

1.3.4 Integração do Google Maps Alguns plugins encapsulam APIs existentes para torná-las mais fáceis de ser acessadas ou para ocultar qualquer diferença entre navegadores distintos.

O plugin gMap (http://gmap.nurtext.de/) é um desses exemplos, e permite integrar um mapa do Google a sua página web. Embora você possa usar a

Capítulo 1 ■ Extensões da jQuery

41

própria API do Google Maps em JavaScript, plugins como esse encapsulam essa funcionalidade para fornecer uma interface mais simples.

O mapa mostrado na figura 1.4 é resultante do código contido na listagem a seguir, demonstrando como o plugin é fácil de ser utilizado.

Listagem 1.4 – Adicionando um mapa do Google $('#map').gMap({zoom: 4,

markers: [{address: 'Brisbane, Australia',

html: 'Brisbane, Australia', popup: true}]

});

Figura 1.4 – Integração do Google Map com o plugin gMap.

1.3.5 Cookies O plugin Cookie (https://github.com/carhartl/jquery-cookie) para jQuery facilita a interação com os cookies associados a uma página web. Esse plugin difere dos exemplos anteriores quanto à funcionalidade, pois ele não se aplica a elementos específicos da página web. Em vez disso, o plugin provê uma função utilitária que permite trabalhar com cookies para toda a página.

42

Estendendo a jQuery

Criar um cookie é tão simples quanto fornecer seu nome e seu valor: $.cookie('introShown', true);

Você pode fornecer parâmetros adicionais para personalizar o cookie – definindo o tempo para ele expirar (por padrão, os cookies expiram ao final da sessão corrente), o domínio e o caminho (path) aos quais ele se aplica, se o cookie exige transmissão segura e se o valor do cookie será codificado. $.cookie('introShown', true, {expires: 30, path: '/'});

Obter o valor de um cookie é somente uma questão de fornecer seu nome.

Se não houver nenhum cookie com o nome especificado, um valor null será retornado. var introShown = $.cookie('introShown');

Apague um cookie definindo seu valor com null. $.cookie('introShown', null);

O plugin Cookie será descrito em detalhes no capítulo 6.

1.3.6 Animação de cores A jQuery básica inclui capacidades de animação para atributos de elementos que correspondam a valores numéricos simples. Qualquer outro formato para um atributo exige um handler especial para animá-lo corretamente. Como parte do módulo Effects do projeto jQuery UI (http:// jqueryui.com), você pode animar cores (http://jqueryui.com/animate/) que podem ser definidas como um valor hexadecimal (#DDFFE8 ou #DFE), um trio RGB [rgb(221, 255, 232) ou rgb(86%, 100%, 91%)] ou um nome de cor (lime).

Após converter os vários formatos de cor para um formato comum, cada componente da cor (vermelho/verde/azul) será animado separadamente, de seu valor inicial até seu valor final. Ao disponibilizar esse recurso na forma de um plugin para animação, você pode utilizar a funcionalidade padrão da jQuery para aplicá-lo: $('#myDiv').animate({backgroundColor: '#DDFFE8'}); $('#myDiv').animate({width: 200, backgroundColor: '#DFE'});

O capítulo 11 descreve os plugins de animação.

Capítulo 1 ■ Extensões da jQuery

43

O que você deve saber A jQuery é a biblioteca JavaScript mais amplamente utilizada na web.

A jQuery disponibiliza funcionalidades básicas e comumente usadas, porém está projetada para ser estendida de várias maneiras diferentes.

Há uma comunidade próspera de plugins de terceiros que se desenvolveu em torno da jQuery.

As capacidades de um plugin estão limitadas somente pela sua imaginação.

1.4 Resumo A jQuery evoluiu até se tornar a biblioteca JavaScript mais amplamente utilizada na web atualmente. Embora tenha várias funcionalidades incluídas, ela se concentra na disponibilização da infraestrutura básica e nos recursos usados por diversas pessoas em vários sites diferentes.

Reconhecendo que não é possível oferecer tudo a todos, a jQuery inclui inúmeros pontos de extensão a partir dos quais outras pessoas podem estender seu comportamento.

Você pode acrescentar funcionalidades a praticamente todas as partes da jQuery, da definição de seletores personalizados até a animação de valores não numéricos de atributos ou a geração de novos eventos, ou ainda a criação de componentes sofisticados de UI. O único limite é a sua imaginação.

Criar um plugin para seu código permite que você o reutilize mais facilmente em várias de suas páginas web. Isso reduz o custo de testes e de manutenção, pois você terá somente uma única cópia do script.

No próximo capítulo, você verá como é fácil estender a jQuery por meio da criação de um plugin simples, antes de mergulhar mais a fundo nas melhores práticas para o design de plugins mais complexos.