02. jQuery image zoom effect – De apelo visual, este plugin é útil quando bem usado.

03. Password – Ele monitora e exibe a força da senha digitada. Dentre os que pesquisei, achei este o mais simples.

04. Slide Simples – Slide simples de foto. Sugiro usar este para estudo. É muito simples fazer um desses. Aprenda a usar e aplique outros locais.

05. Crop com Upload – Permite enviar uma imagem e aparecer aquele recurso de cortar a foto, semelhante ao Orkut.

06. jBar – Mostra uma barra de notificação, semelhante ao que o Twitter está usando

07. Crop com upload (2) – Corta a imagem, faz upload e permite fazer mais algumas alterações na imagem.

08. jMaxInput – Plugin que permite mostrar a quantidade de caracteres digitado e ainda validar caso não tenha preenchido.

09. jPaginate – De apelo visual e muito divertido, este plugin dá um efeito de transição na paginação.

10. jTextTranslate – Utiliza a API do google para traduzir os textos selecionados. Muito interessante.

11. Jqtransform – Transforma um formulário comum para um layout mais agradável.

12. Chromatable – Monta uma tabela com os dados informados.

13. Password Strength – Mostra força da senha, mas este exibe o tempo aproximado que sua senha pode ser descoberta.

14. Scroll Menu – De grande apelo visual, este plugin deixa seu menu bem louco. É divertido.

15. MB.MENU – Para quem gosta de colocar firulas no menu. É um plugin meio pesado, mas para quem for fazer bom uso dele, vale o carregamento.

16. Fancy Player – Exiba vídeos com mais estilo. Este plugin garante a boa aparência.

17. Flickr Menu 2 – Estilo de menu imitando o Flickr.

18. SlideShow – Gosto muito deste. É simples e apresenta slides de uma forma bem formal.

19. iToggle – Plugin bem original, que exibe um interruptor on/off. E como nota, a empresa Engage Interactive arrebenta com interação. Navegue no site deles e aproveite para conheça seu laboratório.

20. Playlist Youtube – Exiba uma playlist do youtube com o jQuery.

Mais plugins:

• +14 plugins para jQuery
• +25 Menus feitos com jQuery
• +40 plugins para jQuery
• +10 plugins para jQuery

Update (02/09/2010) – Devido ao alta quantidade de acessos nesta página, verifiquei os links dos plugins e corrigi alguns.

Sabe quando uma determinada imagem tem o efeito de zoom, e se você clicar dezenas de vezes por segundo na imagem, a animação vai continuar acontecendo, mesmo depois de você ter parado de clicar.

Exemplo:

[sourcecode language='javascript']


[/sourcecode]

Para evitar isso é muito simples, basta encadear a função Stop no animate. Veja a modificação do script acima.

[sourcecode language='javascript']


[/sourcecode]

Simples, não?
Receio que muita gente questionava este problema ao usar jQuery.

Sugestão: Você pode usar esta técnica emoutras ocasiões, alias, ela vai ser muito mais útil agora que você a conhece.

Para quem não compreendeu, convido a dar uma lida na documentação do animate:

• http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback

Plugin com diversos recursos para manipular completamente um grid em tabela, é possível ordenar, buscar, limitar entre outros. São recursos incríveis, veja neste link: http://trirand.com/jqgrid/jqgrid.html

Sparklines

Bacana para montar pequenos e médios gráficos em suas aplicações. Ele gera de forma muito simples, bastando informar poucos parâmetros em array.

UploadFy

Um dos mais recomendados plugins para upload de arquivos jQuery. Ele pode parecer meio complexo de inicio, mas o aprendizado é válido.

Boxy

Plugin jQuery bacana para usar janelas modal, box de avisos, box com formulários via ajax entre outros. Plugin bem flexível.

qTip

qTip já é um consagrado da Craig Thompson’s. Não é viável o uso em qualquer projeto, mas vale cohecê-lo, pois um dia você vai precisar.

Masked

Incrivelmente útil este efeito de mascarar um input de formulário. Com a versalidade do mesmo, você pode mascarar em qualquer padrão.

Rikrikrik

Com esse nome criativo, o plugin dá conta de fazer buscas. Ele busca dados em um array e mostra comente os relacionados. É interessante. Mas se você quiser fazer buscas dentro de uma tabela, prefira o Grid Plugin.

Tablesorter

Interessante para aplicar o recurso de Sort nas colunas na tabela. É aquele efeito que ordena determinada coluna da tabela. Plugin dispensável caso esteja usando o Grid Plugin.

Fancy Zoom

Curioso efeito de zoom. Eu usava ele em versão prototype, mas desde que me converti para jQuery, passei a procurar plugins que antes usava em prototype, agora em jQuery e esse não foi diferente. É um plugin idêntico, se não melhor. Este plugin costuma agradar muito.

jPlayer

Este plugin incrível permite executar arquivos MP3 e Ogg. Permite usar playlist. O mais incrível é que o layout dele é customizavel por css.

Um dos melhores plugins que já usei para jQuery, tanto é que já estou escrevendo um artigo especial para este plugin, com tutorial e tudo. Ele é simplesmente fantástico, embora tenha uma documentação fraca.

Para os amantes de Cakephp, logo irei publicar um helper para este plugin.

SuperSized

Plugin interessante e pode ser útil às vezes. Ele posiciona o background da sua página de acordo com a resolução do usuário. Ele centraliza o posicionamento não só do background, mas dos elementos que você configurar.

Fancy Thumbnail

Excelente plugin para uma galeria de fotos ou conjunto de imagens. Versátil e diferente.

Sliding Boxes

É um efeito bacana e não é difícil se fazer sem o plugin, mas a idéia é válida.

anthingSlider

Esses nomes de plugins estão cada vez mais criativos. Este é apenas um slide. A diferença dele é o tipo de animação. Se você não reparou, ao deslizar ele vai devagar e acelera rapidamente, isso é bem legal.

#1 – Economia de banda em seu servidor, pois sempre que seu site for carregado, o script será puxado dos servidores do Google e não do seu.

#2 – É bem mais rápido adicionar um link do que baixar a ultima versão do jQuery e salvar na raiz do seu site.

#3 – Você sempre estará com a versão nova do jQuery.
Como fazer isso? (Você pode escolher a versão a ser usada também)

Modo mais simples e mais utilizado:
[sourcecode language='javascript']

[/sourcecode]

Para quem usa Cakephp, basta fazer assim:
[sourcecode language='php']
< ?=$javascript->link(‘http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js’, false);?> [/sourcecode]

Modo ApiGoogle:

Com a Api de bibliotecas do Google você pode fazer o mesmo para outros frameworks Javascripts como: jQuery, jQuery UI, Prototype, script.aculo.us, MooTools, Dojo, SWFObject e Yahoo! User Interface Library.

Outra característica é que você pode especificar a versão que deseja utilizar e se deseja que ela seja carregada “comprimida” ou não, exemplo:
[sourcecode language='javascript']
google.load(“jquery”, “1.3″, {uncompressed:true})
[/sourcecode]

1.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Exelentes dicas para jquery, altamente recomendável.

Link: http://pomoti.com/excelentes-truques-e-dicas-para-jquery

Encontrei uma ótima lista de plugins para jQuery, confira a baixo:

1. Interface ~ opções para movimentar divs, mudar tamanhos, criar slideshows, auto-completar, criar carrinho de compras e outras coisas.

2. jQuery Flash Plugin ~ “simples, mas poderoso” ~ detecta se o Flash está instalado, pede para instalar, é acessível e não obstrusivo! Possui códigos legais feitos com ele como inserir um mp3 player em Flash e vídeos do YouTube.

3. TableSorter ~ permite que o usuário edite a ordem dos dados de tabelas sem precisar recarregar a página.

4. jQMinMax ~ adiciona suporte a min-width, max-width, min-height e max-height onde eles não são suportados.

5. QuickSearch ~ plugin não-obstrusivo que busca textos e possui várias opções.

6. Tabs version 2 ~ sistema de abas com diversos efeitos.

7. autocomplete ~ faça sistemas de autocompletar facilmente com esse plugin.

8. autohelp ~ ajuda o usuário a preencher formulários dando dicas do que escrever.

9. editable ~ edite elementos com um click.

10. AutoScroll ~ segure Control e mova o mouse para rolar a página.

11. jQuery History ~ grave o histórico e ative a opção de voltar no navegador.

12. CheckBox ~ mude as checkboxes de seus formulários com esse plugin e CSS.

13. Chili ~ colore a sintaxe de códigos de diversas linguagens com CSS.

14. ColorGradient ~ cria gradient em elementos com as cores selecionadas.

15. Gradient ~ cria efeito gradient no fundo de elementos.

16. Curvy Corners ~ adicione bordas arredondadas em elementos facilmente. Sem Photoshop!

17. GreyBox Redux ~ mostre fotos, sites e outras coisas em uma janela no estilo LightBox.

18. jCarousel ~ controla listas verticais e horizontais com conteúdo dinâmico ou estático e com animação.

19. jScrollPane ~ mude a aparência das scrollbars.

20. MouseGestures ~ identifique os movimentos do mouse.

21. jTicker ~ faz com que uma div rode notícias vindas de um arquivo RSS.

22. ToolTip ~ cria as famosas tooltips. Aquelas janelinhas que aparecem quando você passa o mouse em algo.

23. NiceJForms ~ deixe seus formulários mais belos.

24. Ajax Queue ~ faça filas para carregar páginas.

25. pngFix ~ corrige o velho problema do PNG transparente no IEca 5.5 e 6.

26. jQuery Accessibility Plugin ~ torna seu site acessível facilmente.

27. jTemplates ~ cria templates facilmente 100% JavaScript.

28. jqUploader ~ substitui campos input por um arquivo Flash que mostra a porcentagem e barra de progresso dos uploads.

29. jTagEditor ~ cria editores de códigos HTMl, sintaxe Wiki, BBCode e outras coisas.

30. jQuery Grid ~ solução para representar dados em tabelas.

31. jdMenu ~ cria menus dropdown facilmente.

32. DynaCloud ~ cria tags cloud de textos e os colore quando clicados.

33. FlyDOM ~ gera conteúdo dinamica e facilmente.

34. jQuery UI ~ crie interfaces para o usuário facilmente com esse plugin.

35. BlockUI ~ mostra uma mensagem de espera no centro da tela enquanto executa alguma operação AJAX.

36. jQuery Calendar ~ cria um calendário quando o usuário clica em um campo de texto de formulário.

37. jqModal ~ crie diversos tipos de janelas com HTML e CSS.

38. Impromptu ~ crie diversos tipos de mensagem de confirmação.

39. Password Strenght Meter ~ use-o para medir se uma senha é fácil ou difícil.

40. Multiple File Upload ~ permite upload de múltiplos arquivos com filtro de extensões e número máximo de arquivos.

Lista feita por Pedro Menezes.

Recebi uma notificação do Google Alert sobre jquery, fui de blog em blog e acabei parando em um artigo muito interessante e extremamente útil, mesmo para quem já é féra em Jquery.

Confira neste link: http://www.myinkblog.com/2009/08/04/10-tips-for-writing-better-jquery-code/

Para facilitar podemos usar o Jquery, há um plugin chamado TableSorter.
Você poderia criar este efeito ‘na mão’, com o jquery puro, sem plugins, mas para quê? Se já existe um plugin que faz tudo isso.

É mais simples do que você imagina.

Você pode fazer o download da versão Full release que é completa, ou se preferir faça download do arquivo jquery.tablesorter.min.js.

Colocando tudo nos devidos lugares, não se esquecendo de chamar o arquivo jquery na página, vejamos como configurar o recurso.

[sourcecode language='javascript']
jQuery(document).ready(function() {
$(“#tablesorter-clientes”).tablesorter();
});
[/sourcecode]

Sim, é só isso mesmo. Basta colocar o ID da tabela.
Você ainda pode configurar as colunas que terão este recurso ou ainda as que já estarão ordenadas por padrão. Veja abaixo:

[sourcecode language='javascript']
$(“#tablesorter-clientes”).tablesorter({
sortList: [[3,1]],
headers: {
5:{sorter: false}
}
});[/sourcecode]

Linha 02: sortList abre o parâmetro de ordenação padrão, ou seja, é para eu marcar uma coluna que estará ordenada sempre que esta tabela for mostrada. Sua configuração [3,1] diz para pegar a quarta coluna (Lembre-se que javascript começa a contar a partir do zero) e marcar como decrescente.

Explicando melhor: [coluna,ordem] Onde coluna é o numero da coluna escolhida, iniciando em zero. Ordem como valor 0 fica em ordem crescente, com o valor 1 fica com ordem decrescente.

Linha 03: Abre o parâmetro para configurar os Headers.

Linha 04: No caso mostrado, o valor 5 é a coluna(iniciando em zero) escolhida. Sorter:false diz para não aplicar ordenação nessa coluna. Você pode desativar a ordenação em mais de uma coluna da seguinte forma: 4:{sorter: false},5:{sorter: false}

Dica: Atenção no arquivo css e nas imagens. O css que puxa as setinhas do header, caso elas não apareçam é porque você não puxou o css na página ou o css não está conseguindo encontrar as imagens.

Para mais informações, veja a documentação do plugin: http://tablesorter.com/docs/

Você ainda pode usar os Widgets que eles disponibilizam, eu não usei nenhum, não achei necessário, mas caso prefira, vá fundo.

Até a próxima.

Primeiro: Certifique-se que a biblioteca jquery esteja sendo invocada na página.

Vamos ao css:

.zebraUm{background:#C4DCC4}
.zebraDois{background:#EBF3EB}

Abaixo a tabela propriamente dita:
(Omitiram-se alguns códigos para reduzir o tamanho do código)

<table border="0">
<thead>
<tr>
<td>Destino</td>
<td>Saída</td>
<td>Chegada</td>
<td>Data</td>
</tr>
</thead>
<tbody>
<tr>
<td>Rio de janeiro</td>
<td>07:00</td>
<td>10:30</td>
<td>22/09</td>
</tr>
<tr>
<td>Rio de janeiro</td>
<td>07:00</td>
<td>10:30</td>
<td>22/09</td>
</tr>
<tr>
<td>Rio de janeiro</td>
<td>07:00</td>
<td>10:30</td>
<td>22/09</td>
</tr>
</tbody></table>

Agora temos o esqueleto da tabela, vamos adicionar o efeito mágico de tabela zebrada.

1
2
3
4

$(document).ready(function() {
   $('table tbody tr:odd').addClass('zebraUm');
   $('table tbody tr:even').addClass('zebraDois');
});

Explicando:
Linha 2: O seletor odd seleciona todas as linhas ímpares contidas no corpo da tabela.
Linha 3: O seletor even seleciona todas as linhas pares contidas no corpo da tabela.

Simples, não?

Partindo do princípio que você tem boas noções de javascript, recomendo um framework que vai mexer um pouco com a sua cabeça, se chama Jquery. Você tem duas formas de aprender:

1. Consulte a documentação do Framework e aprenda por lá.
2. Compre o livro do Maujor.

Se você julga Javascript importante(dã), estude Jquery. Não preciso falar mais nada.
Quando estiver estudando, volte aqui no blog e me diga o que está achando e me agradeça.

Bom estudo.

Atualização 06-11-09
Você também pode aprender por aqui, tem diversas dicas: http://www.renanlima.com/blog/category/jquery/

Pois é, as vezes o Internet Explorer me dá medo. Falo sério.

Certa vez  percebi este erro no site de um cliente da empresa, pensei: É simples, e realmente é, agora.

Esse erro só acontece no internet explorer. Isso ocorre quando um código javascript modifica o Dom antes do término da página.

Pergunta: O IE não poderia ignorar isso e deixar rolar a página? Tem mesmo que mostrar este erro e travar a pagina?

Enfim, encontrei duas soluções.

1. Caso use jquery, acerte a forma que você escreve script em jquery. Passe a colocar toda instrução dentro do Ready, veja um exemplo:

   $(document).ready(function()
   {
   	// Seu código aqui
   });

2. Este foi o meu caso.
   Em um portal que desenvolvi, precisei utilizar mais de uma biblioteca, na verdade 3. Então para saber qual estava dando este problema, fui comentando cada linha até descobrir a biblioteca que estava dando pau.

   Descobri a biblioteca que estava conflitando, mas o site não poderia ficar sem esta biblioteca, então tive que fazer uma pequena adaptação.

   Como a biblioteca rebelde estava conflitando, criei um iframe e joguei tudo dela lá dentro, separando o comportamento da biblioteca rebelda das outras, assim, fazendo ambas funcionarem, cada uma no seu espaço, mas para o usuario final, trabalhando harmoniosamente.

Julgo importante essas dicas porque perdi algumas horas em pesquisas e testes.
Divirta-se!

http://www.atblabs.com/jquery.corners.html

Abra o codigo fonte, pegue o JS incluido e siga as instruções do site. Muito simples.

Para quem não conhece, Jquery é um framework que nos fornece uma gama muito grande de ferramentas, você pode conhecer melhor neste link: www.jquery.com

Vou deixar para vocês que tenho certeza que irá ser uma mão na roda em seu trabalho, tem de tudo.

plugins.jquery.com

Para usar estes plugins, primeiro você deve baixar o script jquery.

Logo mais estarei postando tutoriais de como usar os plugins.