Segundo exemplo com Mootools
Para continuar o manual de Mootools, veremos um segundo exemplo de grande simplicidade para fazer um scroll em uma camada por Javascript. Este sistema de scroll ou deslocamento seria muito complexo de fazer sem a ajuda do framework como Mootools. Nós vamos fazê-lo com uma simples execução de uma instrução Javascript.
Antes de tudo, o primeiro que há que esclarecer é que este artigo dá por entendido alguns conceitos que vimos no
manual de Mootools, por isso será necessário ler os anteriores capítulos.
Agora colocarei o
link ao exemplo em funcionamento para que possamos vê-lo em funcionamento antes de passar a visualizar o código.
O presente exemplo utiliza o módulo chamado Element.Dimensions.js, que tem dois métodos que nos servirão para fazer o deslocamento:
Método scrollTo()
Serve para deslocar um elemento a uma nova posição. Recebe dois parâmetros, as coordenadas X e Y às que queremos mover o scroll do elemento.
Método getSize()
Serve para obter as dimensões de um elemento, assim como a posição atual do scroll ou deslocamento que tiver realizado sobre o mesmo. Devolve um objeto com uma série de propriedades que são as informações sobre tamanho e deslocamento do elemento. Entre as propriedades tem a que nos interessa, que se chama scroll e por sua vez, scroll tem duas propriedades que são as X e Y do scroll que tiver realizado. Por exemplo:
meuelemento.getSize().scroll.x
Devolveria os pixels que tiver deslocado o elemento meuelemento na horizontal.
meuelemento.getSize().scroll.y
Devolveria o deslocamento vertical que tiver realizado sobre o elemento meuelemento.
O código deste simples exemplo é o seguinte:
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Exemplo 2 com Mootools</title>
<script src="mootools-comprimido-1.11.js" type="text/javascript"></script>
</head>
<body>
<div id="texto_scroll" style="overflow: auto; height: 70px; width: 400px;">
<div style="width:100%;">
Olá, isto é um texto que vou colocar de prova para fazer um scroll rapidamente com Mootools.
<br>
Na verdade este framework de javscript funciona muito bem e permite um desenvolvimento surpreendentemente rápido.
<br>
Em poucos passos e com absolutamente nenhum conhecimento do Framework consegui fazer esta página. Fui ajudado pela documentação e por alguns exemplos que encontrei na página: http://clientside.cnet.com/wiki/mootorial/
<br>
Agora teria que tentar ir aos poucos para conhecer todo o funcionamento detalhadamente.
</div>
</div>
<br>
<script>
camada_deslocar = $('texto_scroll');
</script>
<a href="javascript:camada_deslocar.scrollTo(0, camada_deslocar.getSize().scroll.y + 20);">Abaixo</a> // <a href="javascript:camada_deslocar.scrollTo(0, camada_deslocar.getSize().scroll.y - 20);">Acima</a>
</body>
</html>
Como vemos, primeiro incluímos dentro do head da página o script com o framework de Mootools, com a etiqueta
<script>
.
Logo, criamos uma camada com um texto e uma série de estilos CSS para que tenha um tamanho definido, que não permita ver o conteúdo completo do texto, e umas barras de deslocamento para fazer o scroll.
A seguir há um script que cria uma variável global à página que contém a camada que queremos deslocar.
<script>
camada_deslocar = $('texto_scroll');
</script>
Logo, há um par de links que são os que, clicando, deslocará automaticamente o texto acima ou abaixo.
<a href="javascript:camada_deslocar.scrollTo(0, camada_deslocar.getSize().scroll.e + 20);">Abaixo</a>
Com "javascript:" colocado em um href de um link, estamos indicando que se tem que executar essa instrução javascript ao clicar o link. E a instrução é:
camada_deslocar.scrollTo(0, camada_deslocar.getSize().scroll.y + 20);
Isso indica que na variável da camada que havíamos criado antes, camada_deslocar, se tem que executar o método scrollTo(). Este método recebe como primeiro parâmetro 0, porque não queremos deslocá-lo horizontalmente. Logo, como deslocamento vertical colocamos o deslocamento vertical do elemento + 20 pixel. Conseguimos o deslocamento vertical atual do elemento com camada_deslocar.getSize().scroll.y, tal como havíamos explicado antes neste artigo.
O link para deslocar o scroll para cima seria muito parecido ao que acabamos de ver.
<a href="javascript:camada_deslocar.scrollTo(0, camada_deslocar.getSize().scroll.y - 20);">Acima</a>
A única diferença é que agora fazemos um scrollTo() a zero na horizontal e ao scroll atual - 20 pixel.
Espero que tenha se entendido bem o exemplo. Podemos ir à documentação de Mootools, do módulo Element.Dimensions.js para obter a descrição completa dos métodos que utilizamos.
Deixo novamente o
link ao exemplo em funcionamento.
Até aqui neste manual vimos dois exemplos muito simples sobre Mootools, este segundo um pouco mais prático. Porém, o objetivo é expressar por meio de um código a simplicidade com que se programa com Mootools para conseguir efeitos que de outra maneira teria custado muito trabalho programar. E tudo compatível com os navegadores mais habituais.
