Empreendedorismo, SEO, tecnologia e motivação
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.
Jquery – Deixando suas animações mais profissionais
22 years ago
by Renan Lima
in Jquery
Vou deixar uma dica bem rápida e simples para você aperfeiçoar suas animações.
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:
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.
Carregar Jquery do servidor do Google
02 years ago
by Renan Lima
in Jquery
Há três motivos para você adotar esta sugestão:
#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]
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
25 boas práticas para jquery
02 years ago
by Renan Lima
in Jquery
Exelentes dicas para jquery, altamente recomendável.
Link: http://pomoti.com/excelentes-truques-e-dicas-para-jquery
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.
10 boas práticas para programar em Jquery
02 years ago
by Renan Lima
in Jquery
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/
Comentários recentes