Jquery - Acessibilidade ( tamanho da fonte )

[Andre Assis 0]

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!

[Thiago Retondar 18]

Muito boa a contribuição. ^_^

 

Tópico movido:

 

JavaScript / DHTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif JavaScript / DHTML » Laboratória de Scripts (JavaScript / DHTML)

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif