Empreendedorismo, SEO, tecnologia e motivação
Post com a tag plugins jquery
20 Plugins para jQuery
22 years ago
by Renan Lima
in Jquery
01. MeioMask - Até agora, pra mim este é o melhor plugin para mascarar inputs.
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:
Update (02/09/2010) – Devido ao alta quantidade de acessos nesta página, verifiquei os links dos plugins e corrigi alguns.
14 ótimos plugins para jQuery
12 years ago
by Renan Lima
in Jquery
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
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.
Um dos mais recomendados plugins para upload de arquivos jQuery. Ele pode parecer meio complexo de inicio, mas o aprendizado é válido.
Plugin jQuery bacana para usar janelas modal, box de avisos, box com formulários via ajax entre outros. Plugin bem flexível.
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.
Incrivelmente útil este efeito de mascarar um input de formulário. Com a versalidade do mesmo, você pode mascarar em qualquer padrão.
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.
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.
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.
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.
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.
Excelente plugin para uma galeria de fotos ou conjunto de imagens. Versátil e diferente.
É um efeito bacana e não é difícil se fazer sem o plugin, mas a idéia é válida.
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.
25 Menus e Plugins para Jquery
142 years ago
by Renan Lima
in Jquery
![(jquery) [bb]](http://www.renanlima.com/blog/wp-content/uploads/2009/10/JQuery_logo_color_onwhite.png){kind=logo}
1.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial
Tabbed Interface ou Tabbed estrutura do menu esta realmente ficando famoso em web design e desenvolvimento. Este tutorial irá mostrar-lhe como construir sua própria interface de abas usando jQuery com slideDown / slideUp efeito. Certifique-se de verificar o demo, você definitivamente vai gostar.
2. Animated Menus Using jQuery
Aprenda a criar este menu com um efeito surpreendente em animação usando apenasXHTML simples, CSS e Javascript semelhante ao Dragon Interactive (dragoninteractive.com).
PS: Testei e este menu não funcionou corretamento no ie6… D:
3.Create a Cool Animated Navigation with CSS and jQuery
Animação e feedback visual são ótimas maneiras de ajudar o usuário a navegar e interagir com um website. Embora tradicionalmente Adobe Flash foi e é, a opção para quem quer animar algum websites, mas também tem seus contratempos na questão otimização (SEO)… Esta é uma alternativa para quem quer evitar o Flash totalmente.
Este plugin jQuery fornece uma maneira fácil de adicionar uma discreta carta baseada widget de navegação para qualquer lista UL ou OL. Facilmente estilizados (via CSS) a barra de navegação aparece acima da lista, mostrando ao usuário as letras de A-a-Z. Clicar em uma das letras da lista de filtros para mostrar apenas os itens na lista que começam com essa letra. Pairando sobre uma carta (opcionalmente) mostra uma contagem acima da carta, que indica quantos itens serão exibidos se que a carta é clicado. Outras opções dar-lhe o controle sobre a funcionalidade básica.
5. jqDock menu
Transformar um conjunto de imagens em um Mac-like Dock menu horizontal ou vertical, com ícones que se expandem em capotamento, e os rótulos opcionais.
6.Sliding Jquery Menu
Este tutorial explica como funciona um deslizamento de menu jquery e você pode ver o efeito em ação nas página PSDTuts no canto superior direito.
Preview || Download
7.CSS Sprites 2 – It’s JavaScript Time
Preview
8. CSS Mac Dock Menu
Se você é um grande fã do Mac, você vai adorar este menu dock CSS. Ela está usando biblioteca JQuery Javascript. Ele vem com dois estilos dock – superior e inferior. Este menu dock CSS é perfeita.
9.Kwicks for jQuery
Kwicks para jQuery começou como uma porta do efeito Mootools insaciavelmente atrativo, mas evoluiu para um elemento altamente personalizável e versátil.
10.Jquery File Tree
Preview || Download
11.Learning jQuery: Fading Menu – Replacing Content
Otimo tutorial do CSS-Tricks explicando como usar CSS com jQuery, desta vez ele ensina como usar jquery desaparecendo no menu de opções.
12. How to Make a Smooth Animated Menu with jQuery
Já viu algumas navegação jQuery excelentes que deixou você com vontade de fazer uma de sua preferência? Este tutorial ensina como fazer isso através da construção de um menu e animá-lo com alguns efeitos suaves.
13.Create Vimeo-like top navigation
Aprenda a criar uma navegação como no site do YouTube, qui é apenas XHTML, CSS.
Preview + Vimeo site || Download
14. jQuery (mb)Menu 2.3
Este é um componente jQuery poderoso para construir facilmente um menu com vários níveis ou um menu contextual (botão direito) de uma forma intuitiva!
Você pode adicionar submenus como você desejar, se o seu submenu ou menu não está declarado na página, o componente irá obtê-lo via ajax chamando o modelo de página com o id do menu que você precisa (o valor do “menu” atributo) Página ajax deve retornar um código bem formatado como no exemplo abaixo.
15. Coda Slider
Preview || Download
16. jQuery idTabs
idTabs é um plugin para jQuery. Ele faz a adição de guias em um site super simples. Mas também pode abrir a porta para infinitas possibilidades.
17. Create a Slick Tabbed Content Area using CSS & jQuery
Um dos maiores desafios para os designers da web é encontrar maneiras de colocar um monte de informações em uma página sem perder a usabilidade. Guias de conteúdo é uma ótima maneira de lidar com esta questão e tem sido amplamente utilizada em blogs recentemente. Isso é ótimo tutorial explicando para construir uma caixa de informação simples com guias em HTML, em seguida, fazê-lo funcionar usando algum Javascript simples, e então finalmente conseguir a mesma coisa usando a biblioteca jQuery.
18. LavaLamp for jQuery lovers!
Preview || Download
19. Animated Drop Down Menu with jQuery
Drop down menus são uma maneira realmente conveniente para colocar um menu grande em um espaço muito pequeno. Por muito tempo as pessoas têm usado apenas um elemento de formulário padrão para queda dos menus, mas com um esforço mínimo você pode criar um efeito muito mais interessante usando jQuery e CSS.
20. Using jQuery for Background Image Animations
Cinco maneiras diferentes de criar animações de fundo da imagem com Jquery.
21. How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery
Como você sabe, há uma série de concorrentes nas bibliotecas javascript em torno destes dias. Apesar de eu preferir o jQuery, eu sempre gostei da forma como o menu MooTools funcionou. Portanto, neste tutorial vamos recriar esse mesmo efeito … mas isso será feito em jQuery!
22. Menumatic Mootools
Preview Vertical || Preview horizontal || Download
23. jQuery convertion: Garagedoor effect using Javascript
For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!
24. Perspective tabs
Perspective tabs é uma simples Mootools 1,2 plug-in que permite um número lagre de guias para caber em um espaço pequeno.
25. Fisheye Menu
Fisheye Menu é um menu de expansão com base no doc MacOSX.
Fonte: http://blog.pixelfont.com.br
40 plugins para jquery
02 years ago
by Renan Lima
in 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.
Jquery – Ordenar coluna de uma tabela (Sorter)
22 years ago
by Renan Lima
in Jquery
Às vezes fica difícil disponibilizar a função de ordenar uma coluna na tabela quando se tem muitos processos. Podemos dar exemplo uma lista de clientes com suas faturas, vencimentos e cobranças, há dezenas de regras aplicadas ao gerar aquela lista de clientes, disponibilizar uma função de ordenar por coluna pode se tornar difícil.
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.
Top 10 (Plugins Jquery)
22 years ago
by Renan Lima
in Jquery
- ctRotate
Um bom efeito para as imagens ficarem trocando. - Moving Boxes
Está sendo muito usado por aí. É um excelente efeito. - Site map Effect
Tem gente que gosta desse efeito, mas enfim.. rs
Abra e veja, vale a pena… ou não. - Slider
Este sem dúvida é muito bom. É um pouco diferente dos efeitos slides que vemos por aí. - Content Slider
Mais um efeito de slider, este é bem interessante também, mas não muito usual. - Garage Door Menu
Muito criativo. Clique e veja. - Contact Form
Uma forma boa de validar a página de contato. - FadeOut
Efeito interessante de sombreamento. Diferente. - AZPZ
Apezar de o nome ser estranho, o efeito é muito bom. Sabe quando em um formulário aparece: Informe seu nome (dentro do input) Quando você clica o texto sai. Se você não clicar no input e clicar em submit o tal input vai como vazio, porque aquele texto é inserido em javascript e não no código html.
Uso ele na maioria dos meus trabalhos. - Editor MarkItUp
Um editor muito bom. Bem completo.
Comentários recentes