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.

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.

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.

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:

• Lançamento de uma nova versão: 1.3;
• Uso do “JavaScript Selector Library” Sizzle;
• Considerável melhoria de performance;
• Suporte nativo ao Live events;
• Nova interface a documentação das API;

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.

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.

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.

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í.

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
});

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.