Easter Egg no site da jQuery

Durante a elaboração do curso jQuery na prática, encontrei um Easter Egg no site da jQuery após analisar os códigos JavaScript contidos no site.

Easter Egg para quem não conhece são brincadeiras e surpresas escondidas dentro de páginas da web, programas, jogos. E no site da jQuery há um Easter Egg.

Para verificar o Easter Egg no site da jQuery, acesse o jQuery.com e aperte a seguinte combinação de teclas: tecla para cima; tecla para cima; tecla para baixo; tecla para baixo; tecla para esquerda; tecla para direita; tecla para esquerda; tecla para direita; tecla b; tecla a.

Ao digitar a combinação de teclas acima você será redirecionado para o JavaScript Rock Star. Confira.

Curso jQuery na prática

Aprenda de uma vez por toda a jQuery. Faça o curso jQuery na prática no dia 24 de outubro de 2009 das 9h as 18h em São Paulo através do iMasters PRO.

No final do curso você será capaz de desenvolver seus próprios recursos com jQuery, reduzir significativamente seu tempo de desenvolvimento e enriquecer seus projetos com recursos modernos, ousados e que conferem uma nova experiência de navegação.

A jQuery é desenvolvida para mudar a forma como escrevemos JavaScript. Para os iniciantes uma oportunidade de enriquecer a experiência de uso dos seus projetos com recursos avançados e modernos. Aos experientes a economia de tempo, facilidade e praticidade no desenvolvimento diário.

Lançada em janeiro de 2006 a biblioteca JavaScript é adota em importantes sites e empresas multinacionais: Google, Dell, Microsoft, Mozilla, WordPress, Bing, Amazon, Wikipedia, White House, Drupal, Digg, iMasters e muitos outros integram a lista.

Confira o sucesso da jQuery frente as demais bibliotecas JavaScript no Google Trends.

Treinamentos avançados em WordPress e jQuery

Fiquei muito feliz com o convite do iMasters para ministrar treinamentos avançados em WordPress e jQuery. Nesta semana foi lançado o site iMasters Pro – Programa de treinamentos avançados.

Vou ministrar três cursos:

  1. Desenvolvimento de plugins WordPress
  2. Desenvolvimento de temas para WordPress online;
  3. Desenvolvimento de temas para WordPress Ao vivo;
  4. Como criar um plugin para jQuery

No CMS Brasil 2009 palestrei sobre Como criar um plugin para WordPress, veja a palestra e tenha uma noção sobre o treinamento Desenvolvimento de plugins WordPress. O bacana que serão 16h aulas e criaremos um projeto real durante o curso.

O treinamento Dominando temas para WordPress é ideal para designers que desejam transformar seu layout num tema WordPress ou adaptar os existentes. Indicado também para programadores que se envolvem com a criação e customização de temas.

Já o treinamento Como criar um plugin para jQuery será muito interessante, além de abordar a criação de plugin vamos recriar do zero o jQuery lightBox plugin que já foi baixado mais de 200 mil vezes e utilizado pela fundação Mozilla.

Conheça o iMasters Pro – Programa de treinamentos avançados, faça sua inscrição e até nosso breve encontro.

Parabéns jQuery

Hoje, dia 14 de Janeiro de 2008, a jQuery completa três anos de vida. Desejo a ela toda felicidade do mundo e ao mesmo tempo agradeço por sua existência. Como é bom desenvolver utilizando essa fantástica “JavaScript library”. Como o próprio slogan dela diz “write Less, do more”.

E para comemorar o aniversário a um ótimo post no blog da Jquery intitulado como jQuery 1.3 and the jQuery Foundation que nos alerta sobre as novidades de aniversário:

Versão 0.4 do jQuery lightBox plugin

Acabo de finalizar e disponibilizar a versão 0.4 do jQuery lightBox plugin.

O carro chefe dessa versão foi o suporte a navegação via teclado com possibilidade de configuração. Novas opções de configuração foram adicionadas: imageBlank, keyToClose, keyToPrev e keyToNext.

O bug relacionado ao conflito do evento “click” quando o plugin é chamado mais de uma vez, por exemplo numa requisição Ajax, foi solucionado. A forma como alguns elementos – select, embed e object para ser mais específico – são ocultados ao exibir o “overlay” foi alterada; ao invés de utilizar a propriedade display, o plugin agora utiliza visibility.

Confira mais detalhes na página do jQuery lightBox plugin e baixe-o.

Lançado versão 0.3 do jQuery lightBox plugin

A versão 0.3 do jQuery lightBox plugin ganhou melhorias, novas opções de configuração, suporte a vários idiomas e correção de bugs.

Nesta versão, reestruturei todo o código visando melhoria de performance e tornando possível a utilização do jQuery lightBox plugin em páginas que utilizam outras bibliotecas JavaScript, se não a jQuery.

O suporte a vários idiomas era esperado e nesta versão tal suporte se concretizou. Os textos utilizados no jQuery lightBox plugin, até o momento, aparem na contagem das imagens a serem exibidas. Por exemplo: Image 3 of 21. Ou seja, exibindo a terceira imagem de 21 no total. Agora, você pode utilizar os textos em português, por exemplo. Utilizando para isso os parâmetros relacionados a essa configuração. Observe:

$(function() {

 $('#galeria_de_fotos a').lightBox({

 	txtImage: 'Imagem',

 	txtOf:	'de'

 });

});

O resultado será: Imagem 3 de 21.

Outros opções de configuração foram disponibilizadas e todas elas podem ser consultadas na página do jQuery lightBox plugin. Consulte também o changelog e verifique o “release” completo desta versão.

Validar radio buttons com jQuery

Existem por aí diversos plugins para a jQuery com a finalidade de validar formulários. Porém, hoje precisei apenas validar um grupo de radio buttons, e vi que não havia necessidade de tantos kbytes para este propósito.

Recorri ao Google, como de praxe, a procura de alternativas de como validar radio buttons com jQuery. Encontrei soluções complexas e muitas delas não exploravam todo o poder da jQuery. O que me levou a criar uma forma simples e prática de validar radio buttons com jQuery. Veja:

var boolValid = false;
$('#frm-forma-pg input:radio').each(function() {
	if ( $(this).is(':checked') ) {
		boolValid = true;
	}
});

A solução é simples. Criei uma variável, boolValid, e defini seu valor como falso. Em seguida, selecionei todos os campos input do tipo radio, input:radio, que estão dentro de um determinado formulário. Utilizei o each para fazer um loop entre eles; dentro do loop utilizei o método is da jQuery para verificar se o campo foi selecionado (checked), se tiver sido, a variável boolValid ganha o valor verdadeiro.

O restante eu deixo com vocês, que preciso voltar ao trabalho. Lembre-se que esta solução pode ser modificada para tornar-se mais dinâmica e genérica. Como não precisei no momento, não me preocupei em criar algo do gênero.

jQuery lightBox plugin

Diga olá para o jQuery lightBox plugin que é utilizado para exibir imagens na mesma página de forma não-obstrutiva. Utilizando a simplicidade e flexibilidade da jQuery.

Esse plugin teve como inspiração e foi baseado no lightBox 2 criado pelo Lokesh Dhakar.

Veja um exemplo do jQuery lightBox plugin em ação. Veja como é simples e versátil utilizá-lo. Faça o download e comente aí.

jQuery resetDefaultValue plugin

Desenvolvi um simples plugin para a jQuery, resetDefaultValue, com o intuito de limpar e resgatar o atributo value definido em elementos do tipo input. Embora, o plugin também funciona em elementos do tipo textarea.

Tal plugin foi desenvolvido com duas intenções:

  1. Precisei para um projeto em que estou envolvido;
  2. Decidir compartilhar com quem utiliza a jQuery;

Código do jQuery resetDefaultValue plugin

/**
 * jQuery resetDefaultValue plugin
 * @version 0.9.1
 * @author Leandro Vieira Pinho 
 */
jQuery.fn.resetDefaultValue = function() {
	function _clearDefaultValue() {
		var _$ = $(this);
		if ( _$.val() == this.defaultValue ) { _$.val(''); }
	};
	function _resetDefaultValue() {
		var _$ = $(this);
		if ( _$.val() == '' ) { _$.val(this.defaultValue); }
	};
	return this.click(_clearDefaultValue).focus(_clearDefaultValue).blur(_resetDefaultValue);
}

Forma de uso do jQuery resetDefaultValue plugin

$(function() {
	$('input').resetDefaultValue(); // for all input elements
	$('input.className').resetDefaultValue(); // for some elements
	$('#q').resetDefaultValue(); // for a especific element
	$('input[@type=text]').resetDefaultValue(); // avoid button/reset/submit buttons
	$('textarea').resetDefaultValue(); // work with textarea too
});

:)

jQuery tem me poupado consideráveis linhas de código

A biblioteca de JavaScript jQuery, tem me poupando consideráveis linhas de código. Meu tempo, cada dia que passa, se torna mais escasso. Então, quando posso codificar menos e viver mais, a felicidade é tamanha que você nem imagina.

Vou demonstrar o pedaço de um código que eu havia codificado alguns meses utilizando a freeDOM.js, e hoje, resolvi refazê-lo utilizando a jQuery. Observe:

Pedaço de código utilizando a freeDOM.js

...
var arrTagInput, i, tagInput;
arrTagInput = $tags('input');
for (i = 0; i < arrTagInput.length; i++) {
	tagInput = arrTagInput[i];
	if ( (tagInput.getAttribute('id') !== null && tagInput.getAttribute('id') !== '') && tagInput.getAttribute('id').match(/^sbt-cart-update([0-9]+)$/) ) {
		tagInputId = tagInput.getAttribute('id');
		$remove($(tagInputId));
	}
}
...

Pedaço de código utilizando a jQuery.

...
$('input[@id*=sbt-cart-update]').remove();
...

Sim, somente.

Meu objetivo com ambos os códigos é selecionar todos os elementos input da página, com os elementos selecionados, irei filtrá-lo, pegando apenas aqueles que contenham em seu atributo ID o seguinte: "sbt-cart-update".

Satisfeito.