Jquery - Acessibilidade ( tamanho da fonte )

Abaixo você encontrará uma forma rápida de inserir em sua página um manipulador de tamanho de fonte.

ATENÇÃO: Para que este script funcione é necessaria a utilização do Jquery

Estruturando o HTML

<ul id="fontes">
 <li><a href="javascript:void(0);">A</a></li>
 <li><a href="javascript:void(0);">A</a></li>
 <li><a href="javascript:void(0);">A</a></li>
</ul>

* Neste exemplo utilizo um id na lista, ela será importante pois servirá de referência para a função.

* A quantidade de links ( A ) é opcional, a função ira manipular o tamanho da fonte proporcionalmente de acordo com a quantidade de links.

Estruturando o CSS

O estilo da lista varia de acordo com as necessidades do layout, o único atributo que quase sempre será aproveitando é que deixará a lista inline.

#linkAcess li{

 display: inline;
}

//ou

#linkAcess li{

 float: left;
}

Chamando a função

No onload da página chamo a seguinte função:

//chamo a funcao

$(function() {
 controlerFontSize('#fontes','#boxConteudo',2,'.fixedSize');
});

* Onde o 1 parametro refere-se a id que incluímos em nossa < ul >

* O 2 parâmetro refere-se ao objeto container de toda a manipulação ( caso queira na página toda, passa a string body )

* O 3 parâmetro trata a quantidade de pixels que a fonte irá aumentar

* E o 4 referencia os objetos que não serão manipulados pela função mesmo estando dentro do container.

A função

function controlerFontSize(obj,container,multipleSize,dontChangeMe){
	//inicializo os valores
	var lastSize = 0;
	var size = 0;

	$(obj).find('a').click(function(){
 //guardo todos os objetos da lista
 var objs = $(this).parents(obj).find(this.tagName);
 //guardo o indice do intem selecionado
 var actualIndex = $(objs).index(this);
 //guardo na variavel size o tamanho selecionado
 for(var i=0; i<objs.length; i++){
 if(actualIndex > $(objs).index($(objs).eq(i)))
 size = size + multipleSize;
 }

 //altero o valor do font size subtraindo o ultimo valor
 $(container).find('*:not(dontChangeMe *)').animate({
 fontSize: '+=' + (size - lastSize) + 'px'
 },'fast')

 //atualizo as variaveis
 lastSize = size;
 size = 0;
	})
 }

*Sempre existe aquele objeto dentro do nosso container que não queremos que seja manipulado para isso usamos a variavel dontChangeMe que neste caso é a classe .fixedSize, ou seja, todos os conteudos contidos dentro dos objetos com essa classe não serão alterados.

Abraços!