sumario-9788575223833

Prévia do material em texto

Novatec
Keith Wood
Apresentação de Dave Methvin
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
5
Sumário
Apresentação .........................................................................................................13
Prefácio .................................................................................................................15
Agradecimentos .....................................................................................................17
Sobre este livro ......................................................................................................18
Sobre a ilustração da capa ......................................................................................23
Parte I ■ Extensões simples ....................................................................24
Capítulo 1 ■ Extensões da jQuery ............................................................................25
1.1 História da jQuery ......................................................................................... 26
1.1.1 Origens .................................................................................................. 27
1.1.2 Evolução ............................................................................................... 28
1.1.3 Nos dias de hoje .................................................................................... 30
1.2 Estendendo a jQuery ...................................................................................... 31
1.2.1 O que você pode estender? ......................................................................32
1.3 Exemplos de extensões .................................................................................. 36
1.3.1 jQuery UI .............................................................................................. 36
1.3.2 Validation .............................................................................................. 38
1.3.3 Controle deslizante gráfico ......................................................................39
1.3.4 Integração do Google Maps .................................................................... 40
1.3.5 Cookies .................................................................................................. 41
1.3.6 Animação de cores ................................................................................. 42
1.4 Resumo ......................................................................................................... 43
Capítulo 2 ■ O primeiro plugin ................................................................................44
2.1 Arquitetura da jQuery ....................................................................................45
2.1.1 Pontos de extensão da jQuery ..................................................................45
2.1.2 Seletores .................................................................................................47
Estendendo a jQuery6
2.1.3 Plugins de coleção.................................................................................. 48
2.1.4 Funções utilitárias .................................................................................. 49
2.1.5 Widgets da jQuery UI ............................................................................ 49
2.1.6 Efeitos da jQuery UI .............................................................................. 50
2.1.7 Propriedades de animação ....................................................................... 51
2.1.8 Processamento de Ajax ............................................................................ 51
2.1.9 Tratamento de eventos ............................................................................53
2.1.10 Regras de validação ...............................................................................53
2.2 Um plugin simples ........................................................................................ 54
2.2.1 Texto placeholder ................................................................................... 54
2.2.2 Código do plugin Watermark ..................................................................55
2.2.3 Limpando as marcas-d’água ...................................................................57
2.2.4 Usando o plugin Watermark .................................................................. 58
2.3 Resumo .........................................................................................................62
Capítulo 3 ■ Seletores e filtros .................................................................................63
3.1 O que são seletores e filtros? ........................................................................... 64
3.1.1 Por que adicionar novos seletores? ........................................................... 64
3.1.2 Seletores básicos .................................................................................... 65
3.1.3 Seletores de pseudoclasse ........................................................................67
3.2 Adicionando um seletor de pseudoclasse ......................................................... 71
3.2.1 Estrutura de um seletor de pseudoclasse .................................................. 71
3.2.2 Adicionando um seletor de conteúdo exato..............................................74
3.2.3 Adicionando um seletor de conteúdo correspondente a um padrão ......... 77
3.2.4 Adicionando seletores de tipo de elemento .............................................. 80
3.2.5 Adicionando um seletor de idioma estrangeiro ........................................81
3.2.6 Seletores do plugin Validation ................................................................ 83
3.3 Adicionando um filtro de conjunto................................................................. 84
3.3.1 Estrutura de um seletor de conjunto ....................................................... 84
3.3.2 Adicionando um seletor de conjunto para elementos intermediários ....... 87
3.3.3 Melhorando o seletor de igualdade ......................................................... 89
3.4 Resumo ......................................................................................................... 92
Parte II ■ Plugins e funções ....................................................................93
Capítulo 4 ■ Princípios dos plugins ..........................................................................94
4.1 Design do plugin ........................................................................................... 94
4.1.1 Vantagens do plugin ............................................................................... 95
4.1.2 Planejando o design ...............................................................................96
4.1.3 Modularize o plugin .............................................................................. 97
7Sumário
4.2 Princípios norteadores ................................................................................... 98
4.2.1 Disponibilize melhorias progressivas ...................................................... 98
4.2.2 Reivindique somente um único nome e use-o para tudo ......................... 99
4.2.3 Coloque tudo sob o objeto jQuery ........................................................100
4.2.4 Não conte com $ ser o mesmo que jQuery ............................................ 101
4.2.5 Oculte os detalhes de implementação usando escopo ............................102
4.2.6 Chame métodos para funcionalidades adicionais ..................................103
4.2.7 Retorne o objeto jQuery para encadeamento sempre que possível ..........104
4.2.8 Use a função data para armazenar detalhes de instância ........................105
4.2.9 Antecipe personalizações ......................................................................106
4.2.10 Use valores default sensatos .................................................................107
4.2.11 Permitir localização .............................................................................109
4.2.12 Estilize seu plugin usando CSS ............................................................ 110
4.2.13 Teste nos principais navegadores .......................................................... 113
4.2.14 Crie uma suíte de testes ........................................................................114
4.2.15 Disponibilize demonstrações e documentação ......................................114
4.3 Resumo ........................................................................................................117
Capítulo 5 ■ Plugins de coleção ............................................................................. 118
5.1 O que são plugins de coleção? ........................................................................119
5.2 Framework para plugins ................................................................................119
5.2.1 Plugin MaxLength ................................................................................120
5.2.2 Operação do plugin MaxLength ............................................................121
5.3 Definindo seu plugin .................................................................................... 123
5.3.1 Reivindicando um namespace ................................................................ 124
5.3.2 Encapsulamento ................................................................................... 124
5.3.3 Usando um singleton ............................................................................126
5.4 Associando-se a um elemento .......................................................................128
5.4.1 Associação básica ..................................................................................128
5.4.2 Inicialização do plugin .........................................................................130
5.4.3 Chamando métodos ............................................................................. 132
5.4.4 Métodos getter ...................................................................................... 135
5.5 Configurando opções ................................................................................... 137
5.5.1 Defaults do plugin ................................................................................. 137
5.5.2 Localizações ......................................................................................... 139
5.5.3 Reagindo a alterações em opções ............................................................141
5.5.4 Implementando opções em MaxLength ................................................. 143
5.5.5 Habilitando e desabilitando o widget ....................................................146
5.6 Adicionando event handlers .......................................................................... 147
5.6.1 Registrando um event handler ............................................................... 147
5.6.2 Acionando um event handler ................................................................ 149
Estendendo a jQuery8
5.7 Adicionando métodos ................................................................................... 149
5.7.1 Obtendo o comprimento corrente ..........................................................150
5.8 Removendo o plugin ....................................................................................150
5.8.1 Método destroy ......................................................................................151
5.9 Últimos retoques .......................................................................................... 152
5.9.1 Corpo do plugin ................................................................................... 152
5.9.2 Estilizando o plugin .............................................................................. 155
5.10 Plugin completo .......................................................................................... 157
5.11 Resumo ....................................................................................................... 159
Capítulo 6 ■ Plugins de função .............................................................................. 160
6.1 Definindo seu plugin .................................................................................... 161
6.1.1 Plugin para localização .......................................................................... 161
6.1.2 Código do framework ...........................................................................163
6.1.3 Carregando localizações ........................................................................164
6.2 Plugin Cookie da jQuery ..............................................................................169
6.2.1 Interações com o Cookie .......................................................................169
6.2.2 Lendo e escrevendo cookies .................................................................. 170
6.3 Resumo ....................................................................................................... 174
Capítulo 7 ■ Teste, empacotamento e documentação de seu plugin ....................... 175
7. 1 Testando seu plugin ..................................................................................... 176
7.1.1 O que deve ser testado? .......................................................................... 176
7.1.2 Usando o QUnit ................................................................................... 178
7.1.3 Testando o plugin MaxLength ...............................................................180
7.1.4 Testando configuração e leitura de opções ..............................................184
7.1.5 Simulando ações do usuário ..................................................................186
7.1.6 Testando callbacks de eventos ................................................................189
7.2 Empacotando seu plugin ...............................................................................191
7.2.1 Reunindo todos os arquivos ...................................................................191
7.2.2 Minimizando seu plugin ....................................................................... 193
7.2.3 Disponibilizando um exemplo básico .................................................... 197
7.3 Documentando seu plugin ............................................................................199
7.3.1 Documentando as opções ..................................................................... 200
7.3.2 Documentando métodos e funções utilitárias ........................................ 201
7.3.3 Demonstrando os recursos de seu plugin ...............................................202
7.4 Resumo ........................................................................................................2049Sumário
Parte III ■ Estendendo a jQuery UI ........................................................206
Capítulo 8 ■ Widgets da jQuery UI ......................................................................... 207
8.1 Framework para widgets ...............................................................................208
8.1.1 Módulos da jQuery UI ..........................................................................208
8.1.2 Módulo Widget .....................................................................................211
8.1.3 Plugin MaxLength ................................................................................ 212
8.1.4 Operação do plugin MaxLength ............................................................ 213
8.2 Definindo seu widget ................................................................................... 215
8.2.1 Reivindicando um nome ....................................................................... 216
8.2.2 Encapsulando o plugin ......................................................................... 216
8.2.3 Declarando o widget............................................................................. 217
8.3 Associando o plugin a um elemento .............................................................. 219
8.3.1 Associação básica e inicialização ............................................................220
8.4 Lidando com as opções do plugin .................................................................222
8.4.1 Defaults do widget ................................................................................222
8.4.2 Reagindo a alterações em opções ...........................................................223
8.4.3 Implementando opções no MaxLength..................................................226
8.4.4 Habilitando e desabilitando o widget .................................................... 231
8.5 Adicionando event handlers..........................................................................232
8.5.1 Registrando um event handler ...............................................................232
8.5.2 Disparando um event handler ...............................................................234
8.6 Adicionando métodos ..................................................................................235
8.6.1 Obtendo o comprimento corrente ..........................................................236
8.7 Removendo o widget .................................................................................... 237
8.7.1 O método _destroy ................................................................................ 237
8.8 Últimos retoques ..........................................................................................240
8.8.1 Corpo do widget ...................................................................................240
8.8.2 Estilizando o widget .............................................................................243
8.9 Plugin completo ...........................................................................................244
8.10 Resumo ...................................................................................................... 247
Capítulo 9 ■ Interação com o mouse usando jQuery UI ........................................... 249
9.1 Módulo Mouse da jQuery UI ........................................................................250
9.1.1 Ações de arrastar com o mouse ..............................................................250
9.1.2 Opções de mouse .................................................................................. 251
9.2 Definindo seu widget .................................................................................... 252
9.2.1 Funcionalidade de assinatura ................................................................ 252
9.2.2 Operação do plugin Signature ...............................................................254
9.2.3 Declarando o widget .............................................................................257
9.3 Associando o plugin a um elemento ..............................................................258
Estendendo a jQuery10
9.3.1 Inicialização do framework ....................................................................258
9.3.2 Inicialização personalizada ....................................................................259
9.4 Lidando com as opções do plugin .................................................................262
9.4.1 Defaults do widget ................................................................................262
9.4.2 Configurando opções ........................................................................... 264
9.4.3 Implementando opções no Signature .....................................................265
9.4.4 Habilitando e desabilitando o widget .....................................................267
9.5 Adicionando event handlers ..........................................................................267
9.5.1 Registrando um event handler .............................................................. 268
9.5.2 Disparando um event handler ...............................................................269
9.6 Interagindo com o mouse .............................................................................270
9.6.1 Uma ação de arrastar pode ser iniciada? .................................................270
9.6.2 Iniciando uma ação de arrastar ............................................................. 271
9.6.3 Monitorando uma ação de arrastar ........................................................273
9.6.4 Finalizando uma ação de arrastar .......................................................... 274
9.7 Adicionando métodos ...................................................................................275
9.7.1 Limpando a assinatura ..........................................................................275
9.7.2 Convertendo para JSON .......................................................................277
9.7.3 Redesenhando a assinatura ...................................................................278
9.7.4 Verificando a presença de assinatura ..................................................... 280
9.8 Removendo o widget .................................................................................... 281
9.8.1 Método _destroy ................................................................................... 281
9.9 Plugin completo ...........................................................................................283
9.10 Resumo ..................................................................................................... 284
Capítulo 10 ■ Efeitos da jQuery UI ......................................................................... 285
10.1 Framework para efeitos da jQuery UI .......................................................... 286
10.1.1 Módulo Effects Core ........................................................................... 286
10.1.2 Funções para efeitos comuns ............................................................... 288
10.1.3 Efeitos existentes ................................................................................. 291
10. 2 Adicionando um novo efeito .......................................................................293
10.2.1 Implodindo um elemento ....................................................................293
10.2.2 Inicializando o efeito ...........................................................................295
10.2.3 Implementando o efeito ......................................................................297
10.2.4 Implementando um efeito em versões anteriores à jQuery UI 1.9 ...........299
10.2.5 Efeito completo...................................................................................302
10.3 Easings para animação ................................................................................302
10.3.1 O que é um easing? .............................................................................30210.3.2 Easings existentes ...............................................................................304
10.3.3 Adição de um novo easing .................................................................. 306
10.4 Resumo ...................................................................................................... 310
11Sumário
Parte IV ■ Outras extensões ..................................................................311
Capítulo 11 ■ Animação de propriedades ............................................................... 312
11.1 Framework para animações .......................................................................... 313
11.1.1 Recursos de animação .......................................................................... 314
11.1.2 Passos durante uma animação.............................................................. 316
11.2 Adicionando uma animação personalizada de propriedade ...........................320
11.2.1 Efetuando a animação de background-position .....................................320
11.2.2 Declarando e obtendo o valor da propriedade ......................................322
11.2.3 Atualizando o valor da propriedade .....................................................325
11.2.4 Efetuando a animação de background-position na jQuery 1.7 ................328
11.2.5 Plugin completo ..................................................................................330
11.3 Resumo ...................................................................................................... 331
Capítulo 12 ■ Estendendo o Ajax ........................................................................... 332
12.1 Framework para Ajax ..................................................................................333
12.1.1 Pré-filtros .............................................................................................334
12.1.2 Transportes .........................................................................................335
12.1.3 Conversores ........................................................................................336
12.2 Adicionando um pré-filtro Ajax ................................................................... 337
12.2.1 Alterando o tipo de dado ..................................................................... 337
12.2.2 Desabilitando o processamento de Ajax ...............................................338
12.3 Adicionado um transporte Ajax ...................................................................340
12.3.1 Carregando dados de imagem ..............................................................340
12.3.2 Simulando dados HTML para testes ....................................................343
12.4 Adicionando um conversor Ajax ..................................................................348
12.4.1 Formato CSV .......................................................................................349
12.4.2 Convertendo texto para CSV ...............................................................350
12.4.3 Convertendo CSV em uma tabela ........................................................354
12.5 Plugins Ajax ...............................................................................................356
12.6 Resumo ......................................................................................................357
Capítulo 13 ■ Estendendo eventos ........................................................................ 359
13.1 Framework para eventos especiais ............................................................... 360
13.1.1 Vinculando event handlers ................................................................... 361
13.1.2 Disparando eventos .............................................................................362
13.2 Adicionando um evento especial ..................................................................363
13.2.1 Adicionando um evento de right-click ................................................ 364
13.2.2 Desabilitando eventos de right-click ....................................................367
13.2.3 Múltiplos eventos de right-click .......................................................... 368
13.2.4 Funções de coleção para eventos .......................................................... 374
Estendendo a jQuery12
13.3 Incrementando um evento existente .............................................................376
13.3.1 Adicionando o tratamento de right-click ao evento click ........................376
13.4 Outras funcionalidades de eventos ..............................................................378
13.4.1 Ações default para eventos ...................................................................379
13.4.2 Callbacks para antes e depois do despacho ...........................................379
13.4.3 Impeça o event bubbling ..................................................................... 381
13.4.4 Vinculação e delegação automáticas .....................................................382
13.5 Resumo ..................................................................................................... 384
Capítulo 14 ■ Criação de regras de validação ......................................................... 385
14.1 Plugin Validation ........................................................................................ 386
14.1.1 Atribuindo regras de validação .............................................................387
14.2 Adicionando uma regra de validação ...........................................................390
14.2.1 Adicionando uma regra com correspondência de padrão .......................390
14.2.2 Gerando regras com correspondência de padrão ..................................394
14.3 Adicionando uma regra de validação para vários campos .............................397
14.3.1 Validações de grupos ...........................................................................398
14.3.2 Definindo uma regra para vários campos .............................................398
14.4 Resumo ......................................................................................................402
Apêndice ■ Expressões regulares ........................................................................... 404
Básico sobre expressões regulares .......................................................................405
Sintaxe de expressões regulares ......................................................................... 406
Funções de RegExp ............................................................................................ 410
Funções de string ...............................................................................................411
Padrões de uso .................................................................................................. 412
Padrões usados em validação ........................................................................ 413
Extração de informações .............................................................................. 413
Processamento de múltiplas correspondências .............................................. 413
Resumo ............................................................................................................ 414
Glossário .............................................................................................................. 415