$.cssHooks, basicamente é uma extensão para as funções .css() e .animate(), ou melhor dizendo, é uma forma de implementar novas propriedades a estas funções, sem a necessidade de alterar o código fonte, por isto é chamada como extensão. Com $.cssHooks, você pode criar infinitas possibilidades para se trabalhar o CSS com jQuery.

O plugin jQuery Rotate, que ilustra bem como funciona $.cssHooks. Vamos a introdução para aprender e criar nossos próprios CSS Hooks:

Para cada extensão que você for desenvolver, há dois métodos base, para o funcionamento da propriedade: get e set. O primeiro diz respeito a recuperar o valor da propriedade e o segundo é setar/alterar o valor da propriedade no elemento. É possivel adicionar mais métodos (para uso interno por exemplo), mas vale lembrar que jQuery utiliza apenas esses dois métodos (get e set).

Sintax básica para $.cssHooks

Vejamos a sintax básica para um CSS Hook:

$.cssHooks.nomeDaPropriedade = {
	//Recupera o valor da propriedade
	get: function(elem){
	},

	//Seta o valor da propriedade
	set: function(elem, value){
	}
}

Cada método, recebe os parâmetros necessários para o desenvolvimento do mesmo. Observe o uso da função .css() para você entender melhor:

$('div').css('nomeDaPropriedade'); //jQuery irá chamar o método GET

$('div').css('nomeDapropriedade', 'valorDaPropriedade'); //jQuery irá chamar o método SET, porque há um parâmetro adicional na função, para setar o valor

Agora é só partir para o desenvolvimento da propriedade.

Criando novos $.cssHooks

Vamos usar este CSS Hook como exemplo:

/**
 * Retorna se o elemento tem o background na cor azul
 * Usando CSSHooks, disponível a partir da versão 1.4.3 do jQuery
 */
$.cssHooks.azul = {
	get: function(elem){
		var azul = ['blue', '#00F', '#0000FF', 'rgb(0, 0, 255)', 'hsl(240, 100%, 50%)'];

		var ret = $(elem).css('background-color');
		return ($.inArray(ret, azul) != '-1')? 1 : 0;
	}
}

Com as novas implementações que faremos, a propriedade azul irá ficar da seguinte maneira:

• Se o elemento tiver o fundo azul, retornará a cor definida. Se não, retornará false;
• Para setar o valor da propriedade, o pârametro value receberá o modo como a cor será defina (hex, rgb, hsl..). E assim o elemento ficará azul, com a cor no modo definido.

De início, vamos alterar o método get, que já está feito. Será necessário alterar apenas uma linha. Se estivesse com a cor azul, retornaria true, agora irá retornar a cor, no lugar do true:

return ($.inArray(ret, azul) != '-1')? ret : 0; //alterado "1" por "ret"

Assim o método irá checar se a cor do elemento está na array (var azul), se tiver retornará a cor, se não retornará false.

E para concluir vamos criar o método set:

set: function(elem, value){

	//Modos disponíveis
	var modo = {
		hex: '#00F',
		rgb: 'rgb(0, 0, 255)',
		hsl: 'hsl(240, 100%, 50%)'
	},

	//Define em qual modo a cor será usada, se não tiver na array, usará o modo NAME (blue)
	usar = 'blue';

	$.each(modo, function(chave, valor){
		if(chave == value) usar = valor; //checa se a chave é igual ao parâmetro value
	});

	alert('A cor usada será: ' + usar); //REMOVER OU COMENTAR;

	$(elem).css('background-color', usar);
}

Não vai ter muito sentido testar o resultado em um navegador que não seja o IE. Todos os demais, que tem suporte a cor RGB, converte a cor para RGB para depois setar a cor. Chece o resultado com o alert disponível no código, depois remova ou comente… você irá ver que funciona corretamente…

Colocando tudo junto:

$.cssHooks.azul = {

	/**
	 * Recupera o valor
	 */
	get: function(elem){
		var azul = ['blue', '#00F', '#0000FF', 'rgb(0, 0, 255)', 'hsl(240, 100%, 50%)'];

		var ret = $(elem).css('background-color');
		return ($.inArray(ret, azul) != '-1')? ret : 0;
	},

	/**
	 * Seta o valor
	 */
	set: function(elem, value){

		//Modos disponíveis
		var modo = {
			hex: '#00F',
			rgb: 'rgb(0, 0, 255)',
			hsl: 'hsl(240, 100%, 50%)'
		},

		//Define em qual modo a cor será usada, se não tiver na array, usará o modo NAME (blue)
		usar = 'blue';

		$.each(modo, function(chave, valor){
			if(chave == value) usar = valor; //checa se a chave é igual ao parâmetro value
		});

		alert('A cor usada será: ' + usar); //REMOVER OU COMENTAR

		$(elem).css('background-color', usar);
	}
}

Demonstração | Download do arquivo

É isto… Foi um exemplo básico e é claro que é possivel criar propriedades bem melhores que esta, basta ter uma boa imaginação e mandar ver no código.

Até a próxima.