Samuel Corradi

Registrando estados no jQuery

programacao, jquery, framework, dica, desenvolvimento

A poucos dias falei sobre as funções .addClass() e .removeClass() do jQuery. Uma outra utilizade dessas funções é registrar o estado de determinado objeto. Veja por exemplo um botão qualquer que mostra/oculta um menu qualquer:

$('.botao').click(function(){
	// se existir um elemento “aberto”...
	if ($('.aberto').lenght > 0) {
		// … fecha o elemento e altera a classe
		$('#menu').slideUp().removeClass('aberto');

	// ou se existir um elemento “fechado”...
	} else {
		// … abre o elemento e altera a classe
		$('#menu').slideDown().addClass('aberto');
	}
});

OBS: Observe que utilizamos a propriedade .lenght para descobrir se existe determinado objeto no DOM. Caso exista algo com a classe 'aberto' (no caso o menu), saberemos que o menu está aberto e que deve ser fechado ao clicar no botão. E vice-versa.

Outro modo de se fazer o controle sobre o estado de um objeto é utilizando uma função do jQuery chamada .data(). Sua sintaxe é:

$('#elemento').data('nome_propriedade', 'valor');

Com essa função nosso código anterior ficaria da seguinte forma:

// iniciamos a propriedade indicando o estado padrao
$('#menu').data('aberto', true);
$('.botao').click(function(){
	// se a propriedade for verdadeira...
	if ($('#menu').data('aberto')) {
		// … abre o menu
		$('#menu').slideUp().data('aberto', false);
	// ou se a propriedade for falsa...
	} else {
		// … fecha o menu
		$('#menu').slideDown().data('aberto', true);
	}
});

Para ajudar, segue outro exemplo de sua utilização retirado da documentação do jQuery:

 $("button").click(function(e) {
	var value;
	switch ($("button").index(this)) {
		case 0 :
			value = $("div").data("blah");
			break;
		case 1 :
			$("div").data("blah", "hello");
			value = "Stored!";
			break;
		case 2 :
			$("div").data("blah", 86);
			value = "Stored!";
			break;
		case 3 :
			$("div").removeData("blah");
			value = "Removed!";
			break;
	}
	$("span").text("" + value);
});

Como vocês puderam ver, podemos controlar o estado de objetos com jQuery de pelo menos duas maneiras. Sendo que o modo .data() é a mais indicada por ser mais elegante e, por não ter que manipular classes no DOM, é mais rápida.

Lembrando que para remover a propriedade do objeto, utilizamos a função .removeData('nome_propriedade').

Últimos posts:

• Pausa para o café - O universo em escalas
• Localizando o arquivo de um comando no Linux
• Histórico das linguagens de programação
• Duplicando discos virtuais no VirtualBox
• Backup de bases MySQL - mysqlhotcopy
• Tratando erros com PHP - Parte 3 (Final)
• Download do Chrome OS – O open-source foi pilhado
• Instalando Google Go
• Go Google, Go!
• XML - Quando usar elementos ou atributos?

Destaques:

• Sobre
• Trabalhos
• Contato