Leandro Vieira Pinho´s Blog

Versão 0.4 do jQuery lightBox plugin

November 17th, 2007. Published under jquery, lightbox, plugin. 35 Comments.

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

October 14th, 2007. Published under jquery, plugin. 3 Comments.

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

October 3rd, 2007. Published under form, jquery, radio, validation. 1 Comment.

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

September 23rd, 2007. Published under jquery, plugin. 21 Comments.

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

August 1st, 2007. Published under jquery, plugin. 3 Comments.

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

July 25th, 2007. Published under freeDOM.js, jquery. No Comments.

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.

Como evitar conflitos com a função dólar $() de frameworks JavaScript

May 23rd, 2007. Published under framework, freedom, javascript, jquery, spry. 3 Comments.

Praticamente todos os frameworks JavaScript possuem a função dólar $(); e cada um deles com suas peculiaridades. O que significa dizer que em certos momentos conflitos entre essas funções ocorrerão.

Alguns frameworks oferecem soluções para que tal conflito seja evitado; consulte a documentação de cada framework e aplique-a.

Recentemente, precisei utilizar o jQuery para utilizar alguns efeitos que ele oferece, e como desenvolvi todo o projeto utilizando a freeDOM, o conflito entre as funções dólar $() de ambos os frameworks foi inevitável.

Para impedir que a função dólar $() do jQuery entre em conflito com outros frameworks, utilize a seguinte solução:

var $j = jQuery.noConflict();
//ou
var $foo = jQuery.noConflict();
//ou
var $comoQuiser = jQuery.noConflict();

Para quem utiliza o Spry (alguém utiliza?) a indicação é renomear a função $() para Spry.$(); também é possível fazer o processo reverso, ou seja:

var $ = Spry.$;

A freeDOM, ainda não pensei neste aspecto, mas levaremos esse detalhe no próximo release.