Arquivo da categoria: Plugins

21 simples e úteis Tutoriais de jQuery

Introdução

São 21 tutoriais que se concentram em seção diferente de um site (menu, galeria deslizante, dicas, dock, janela modal, ajax eturtorials jQuery).  jQuery é um framework em javascript incrível.

Menu de Navegação

Wookmark jQuery plugin

jquery-plugin-example

Navegando acabei achando esse http://www.wookmark.com/, quem tem um layout bem interessante e descobri que ele disponibiliza um script para poder usar, Olhem abaixo. Continue lendo Wookmark jQuery plugin

Drag & Drop com PHP e jQuery

JQuery
JQuery (Photo credit: Wikipedia)

A capacidade de arrastar e soltar conteúdo de uma página e ter que salvar a ordem de usuário, é realmente grande e relativamente fácil de executar com algumas linhas de jQuery. Você precisa incluir a biblioteca de jQuery, que você pode encontrar aqui: jQuery API do Google. Todos os arquivos necessários para obter a instalação e funcionamento estão no final deste post.

Neste tutorial vamos olhar para 2 páginas principais do PHP. a página index.php, que contém o conteúdo e funcionalidades para executar a arrastar e soltar o arquivo e updateList.php que é um simples pedaço de código para atualizar a coluna listOrder no banco de dados usando PHP e MySQL. Além disso, você terá que adicionar os seus dados de banco de dados para o arquivo connect.php que está no final do post. Continue lendo Drag & Drop com PHP e jQuery

Os 55 melhores Plugins jQuery

jquery carrossel

Em web design um carrossel jQuery é um elemento dando aos visitantes fácil acesso a vários itens de conteúdo. É normalmente uma lista de rolagem dinâmica de itens na ordem horizontal onde os itens anteriores e posteriores são parcialmente visíveis. Os itens, que podem ser de conteúdo HTML estático ou carregado com (ou sem) AJAX, pode ser rolada para trás e para frente (com ou sem animação). Usando deslizantes painéis horizontais, conhecidos como carrosséis e Sliders, para apresentar conteúdos de topo é uma das tendências mais fortes de web design ao longo do último par de anos. É um método muito eficaz para aumentar a usabilidade do site web e envolver o usuário. A razão para esta tendência se deve principalmente a chegada do jQuery que tornaram quase “passeio no parque” a adicionar um carrossel jQuery ou deslizante jQuery imagem plugin para um web site.Hoje em dia existem muitos excelentes plugins jQuery Carousel livres disponíveis e torna-se difícil escolher o melhor. Este artigo foi criado especificamente para ajudar você a começar a usar Carrosséis jQuery mas você também pode querer verificar para fora alguns Slider jQuery plugins.Este artigo foi recentemente atualizado com novos plugins jQuery carrossel e todos os links onde verificada. Continue lendo Os 55 melhores Plugins jQuery

10+ jQuery galeria de fotos e plugins slider

Uma imagem vale mais que mil palavras. Nenhuma dúvida sobre isso. A maioria dowebsite de informações baseado em como a CNN, ESPN, todos eles estão usandouma apresentação de slides enorme foto na primeira página. É um método muito eficaz para atrair a atenção dos espectadores.

Então, aqui vai. 15 galeria de fotos baseada em jQuery e controles deslizantes.Aproveite. Continue lendo 10+ jQuery galeria de fotos e plugins slider

30 Javascript Image e Galeria de fotos – Mootool, Prototype, jQuery e Tutoriais

Nesse post tem vários scripts de galeria de fotos feito em jQuery, Mootool, Prototype e com alguns tutoriais. Continue lendo 30 Javascript Image e Galeria de fotos – Mootool, Prototype, jQuery e Tutoriais

3 efeitos de “página enrolada” em jQuery

Provavelmente você já deve ter pensando em “guardar” algum conteúdo do seu website em abas ou em painéis ocultos, ou mostrar alguma propaganda certo? Porque não em páginas que se desenrolam? Vamos agora a 3 belos efeitos de páginas dobradas em jQuery. Continue lendo 3 efeitos de “página enrolada” em jQuery

Plugin de Máscara de formulários para JQuery – Masked Input

Se trata de um plugin bem simples e pequeno (2.8kb) de jquery pra fazer máscaras nos inputs de um formulário, como cpf, cnpj, telefone, cep, etc…

Pra usar é bem simples, faça download dos arquivos :

JQuery 1.2.6, versão pack e
Masked Input-1.1.4, versão pack

e chame-os dentro do HEAD da sua página :

 título do site  ...<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script><script src="js/jquery.maskedinput-1.1.4.pack.js" type="text/javascript"></script>

Para aplicar a máscara, as regras são simples:

a – Representa qualquer letra (A-Z,a-z)
9 – Representa qualquer número (0-9)
* – Representa qualquer caractére alfanumérico (A-Z,a-z,0-9)

Veja os exemplos

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$("#telefone").mask("9999-9999");
$("#cpf").mask("999.999.999-99");
$("#cep").mask("99999-999");
$("#data").mask("99/99/9999");
});
// ]]></script>

Veja um exemplo de um campo ajustável, onde pode ser usado como CPF ou como CNPJ no mesmo campo.

<script type="text/javascript">// <![CDATA[
function str_replace(busca,subs,valor){
			var ret=valor;
			var pos=ret.indexOf(busca);
			while(pos!=-1){
				ret=ret.substring(0,pos)+subs+ret.substring(pos+busca.length,ret.length);
				pos=ret.indexOf(busca);
			}
			return ret;
		}

function mascara(valor,masc){
	var res=valor,mas=str_replace("?","",str_replace("9","",masc));
	for(var i=0;i<mas.length;i++){
		res=str_replace(mas.charAt(i),"",res);
		mas=str_replace(mas.charAt(i),"",mas);
	}
	var ret="";
	for(var i=0;i<masc.length&&res!="";i++){ switch(masc.charAt(i)){ case"?": ret+=res.charAt(0); res=res.substring(1,res.length); break; case"9": while(res!=""&&(res.charCodeAt(0)>57||res.charCodeAt(0)<48))res=res.substring(1,res.length);
				if(res!=""){
					ret+=res.charAt(0);
					res=res.substring(1,res.length);
				}
				break;
			default:
				ret+=masc.charAt(i);
		}
	}
	return ret;
}

	$(document).ready(function(){
		
		$("#cpf_cnpj").keyup(function(){
			
			if($(this).val().length <= 14) 
				$(this).val( mascara($(this).val(), '999.999.999-99') ); 
			else
				$(this).val( mascara($(this).val(), '999.999.999/9999-99') ); 
				
		})
		
	});
// ]]></script>

E o campo fica assim


<input id="cpf_cnpj" name="cpf_cnpj" type="text" />

Fonte: digitalbush

Até a próxima. =)

Top 50 plugins gratuitos e tutoriais para jQuery

jQuery, para os que não conhecem, é uma biblioteca Javascript que torna a vida dos programadores e webdesigners, que trabalham com Javascript, muito, mas muito mais fácil! Se vocênão conhece, sugiro dar uma lida nesse ótimo artigo (em inglês) jQuery para designers.

A comunidade em torno do jQuery é muito grande e muito ativa; os desenvolvedores estão sempre criando novos plugins com as mais diversas funcionalidades e disponibilizando para outros desenvolvedores na internet.

Aqui estarei listando 50 dos melhores plugins gratuitos que já encontrei. Observações sobre a lista: ela não está em ordem e os plugins que não possuem “demonstração online” ao lado é porque o exemplo se encontra na mesma página.

  1. jQuery Corners (demonstração online)
    Crie bordas arredondadas facilmente.
  2. jQuery plugin: Treeview (demonstração online)
    Crie facilmente um menu no formato “Treeview”.
  3. Jcrop (demonstração online)
    Plugin para cortar fotos com jQuery.
  4. Galleriffic (demonstração online)
    Galerrific é um plugin para jQuery que permite que você crie uma galeria de fotos super rápida.
  5. Simple Star Rating System
    Crie um sistema de avaliação, com estrelas, facilmente.
  6. jQuery lightBox plugin
    O famoso lightbox.
  7. FaceBook Like – jQuery and autosuggest Search Engine (demonstração online)
    Plugin para criar um autosuggest com um design baseado no do Facebook.
  8. jQuery sIFR Plugin
    Este plugin permite que você substitua um texto com um fonte default pelo mesmo texto com uma fonte customizada.
  9. jQuery plugin: Accordion (demonstração online)
    Plugin para criar menus no estilo Acordião. (veja o exemplo online para entender melhor)
  10. Tutorial: Crie uma interface com tabs (demonstração online)
    Um tutorial que ensina a criar uma interface com tabs com ajuda do jQuery.
  11. ThickBox (demonstração online)
    É como um lightbox mas que funciona para todo tipo de conteúdo: imagem, galeria de fotos, iFrame, texto, formulários e puxar conteúdo via AJAX.
  12. Table Sorter Plugin
    Plugin que permite que o usuário ordene uma tabela automaticamente (sem atualizar a página) de acordo com o campo clicado.
  13. Tutorial para justificar elementos via jQuery e CSS
    Aprenda a justificar perfeitamente diferentes elementos via jQuery e CSS.
  14. Jquery Slider
    Crie facilmente aquele efeito do conteúdo sendo deslizado ao clicar em algum link.
  15. prettyComments
    Acabou o problema com seus inputs de texto e textareas; agora o comprimento delas vai aumentando enquanto os usuários vão digitando.
  16. Masked Input Plugin
    Coloque máscaras para datas, telefones, CEP etc nos inputs de uma maneira super simples.
  17. jQZoom (demonstração online)
    O usuário terá uma visão ampliada de uma imagem ao passar o mouse sobre ela. (funciona como uma lupa)
  18. jWYSIWYG
    Um editor WYSIWYG em jQuery fácil de ser chamado e com poucas ferramentas.
  19. Tutorial para criar um menu no estilo de porta de garagem (demonstração online)
    Aprenda a criar menus desse tipo.
  20. TableRowCheckboxToggle (demonstração online)
    Permite adicionar a função “toogle” em uma linha de uma tabela.
  21. jQuery Corner Demo
    Adicione bordas arredondadas e diversos outros tipos de canto nos elementos da sua página.
  22. jQuery Flash Plugin
    Acabou o problema para inserir flash na sua página de maneira válida.
  23. Pagination (demonstração online)
    Crie uma paginação para uma lista enorme de itens.
  24. DynaCloud
    Plugin que gera uma nuvem de tags ou palavras-chave de um texto ou de alguma página.
  25. EasyDrag jQuery Plugin
    Permite que você possa dar a habilidade de selecionar e arrastar a praticamente qualquer objeto da sua página.
  26. JCarousel (demonstração online)
    Crie um carousel de imagens facilmente com JQuery.
  27. Tutorial para criar um belo menu com sub-itens (demonstração online)
    Plugin para cortar fotos com jQuery.
  28. Slider Gallery (demonstração online)
    Uma galeria de imagens, com um slider, similar à do site da Apple.
  29. Tutorial para criar um header igual ao do Digg (demonstração online)
    Um ótimo tutorial que abusa do CSS e do jQuery para criar um header semelhante ao do Digg, com direito à menus com sub-menus e tudo mais.
  30. Drop Shadows
    Crie um efeito de drop shadow via jQuery.
  31. Flexi Grid
    Um poderoso plugin para se mostrar e editar um grid (tabela) com diversas linhas e colunas para o usuário.
  32. jQuery Multimedia Portfolio (demonstração online)
    Um plugin para criar um portfolio que suporta diferentes tipos de media: fotos, áudio e vídeo; detectando automaticamente a extensão de cada um para aplicar o respectivo player.
  33. Accessible slider (demonstração online)
    Um controle no formato de um slider pra você usar na sua aplicação web.
  34. Simple Effects Plugins
    Permite que você adicione efeitos em seus objetos de uma maneira super simples. Efeitos como “toogle”, esconder, mostrar, fade-in e fade-out e slide.
  35. jQuery Nice Form
    Estilize os elementos do seu formulário facilmente com esse plugin.
  36. Humanized Messages (demonstração online)
    Plugin para exibir mensagens de feedback para os usuários.
  37. HoverAccordion
    Um menu no formato acordião que funciona com mouse over.
  38. jQuery.ScrollTo (demonstração online)
    Plugin para fazer um scroll até um elemento específico na página.
  39. Facebox
    Uma lightbox inspirada no design do facebook, permite carregar imagens, divs ou páginas inteiras.
  40. jQueryColorPicker
    Um plugin para facilitar o usuário na hora de escolher uma cor.
  41. jQuery AlphaNumeric
    Previna que o usuário insira algum tipo de caracter dentro de um input.
  42. Another In-Place Editor (demonstração online)
    Plugin que transformará qualquer elemento em um campo editável.
  43. Featured Content Glider
    Plugin para criar seções com o conteúdo de destaque no site, com slideshow e tudo mais.
  44. Gradient jQuery plugin (demonstração online)
    Permite que você crie e insira gradientes facilmente nos elementos do site.
  45. Cookie Plugin for jQuery
    Um plugin para facilitar o uso de cookies.
  46. Date Picker
    Plugin que permite ao usuário escolher uma data através de um pequeno calendário.
  47. Tutorial para criar um header com fade (demonstração online)
    Tutorial que ensina a criar um header com fade-in durante o hover e fade-out quando o usuário tira o mouse de cima do header.
  48. JQuery Cycle Plugin (demonstração online)
    Plugin que permite adicionar diversos efeitos de transição entre fotos e imagens.
  49. jTruncate (demonstração online)
    Plugin para fixar um limite de caracteres em uma div e colocar um link do tipo “leia mais” que irá expandir a div sem refresh.
  50. Farbtastic
    Cria um controle do tipo paleta de cores onde o usuário poderá fazer a sua seleção.

Fluency: Tema para sua administração em WordPress

fluency admin versao 2 wordpress admin themes Fluency: Tema para sua administração em WordPress

Está cansado de olhar para o mesmo layout de sua administração em WordPress?

Pois é, agora ficou fácil e rápido mudar o design e deixá-lo muito mais funciona. Use o Fluency Admin que hoje já se encontra disponível na versão 2.3 para rodar sem bugs no WordPress 3.0 e o melhor 100% gratuito e aprovação pela Extend Plugin oficial do WordPress.org.

Novos recursos

* Compatibilidade com o WordPress 3.0
* Adicione o seu próprio link personalizado para o seu logotipo na página de login do WP
* Mostrar o seu próprio logotipo personalizado na parte superior do WP Menu
* Vire menus Hover on / off
* Vire Hot Keys on / off
* Menus no iPad amigáveis
* Melhor suporte para o Opera 10.5 +


Veja algumas imagens dele e mude agora o layout de sua administração!

Este slideshow necessita de JavaScript.