Primeiro exemplo com Mootools
Um primeiro exemplo de página web que utiliza Mootools para fazer um efeito simples que nos permita conhecer o framework sem nenhum conhecimento prévio do sistema.Por Miguel Angel Alvarez - Tradução de JML
Publicado em: 11/9/08
Como havia dito na introdução deste manual, Mootools pode resultar difícil para as pessoas que nunca trabalharam com ele ou com outro framework Javascript. Por isso faz sentido fazer um exemplo inicial muito simples para se iniciar. Este exemplo realmente não serve para nada, simplesmente para que vejamos a facilidade com a que se pode utilizar Mootools para realizar código Javascript compatível com todos os navegadores mais habituais.
Não obstante, há que dizer que para poder utilizar Mootools devemos ter antes um conhecimento médio ou avançado de Javascript, porque realmente o que estamos fazendo nestes exemplos é programar em Javascript funcionalidades para páginas web. Em CriarWeb.com temos vários manuais de Javascript que nos vão servir para obter as bases sobre a linguagem e até conhecimentos avançados. Podemos vê-los na
seção de Javascipt a fundo.
Ademais, para quem não sabe o que é Mootools e onde baixá-lo, será necessário que comece pelo início do
manual sobre Mootools.
Neste exemplo só temos que conhecer algumas coisas de Mootools.
Para começar, há que incluir o código Javascript das bibliotecas de Mootools, isto se faz incluindo o arquivo externo de código Javascript com as bibliotecas do framework, que baixamos da página de Mootools.
<script src="mootools -1.11.js" type="text/javascript"></script>
A função $()
Em Mootols utilizamos a function $() para receber um objeto com um elemento da página. $() recebe como parâmetro o identificador do elemento, que se indicou com o atributo id da etiqueta HTML do que queremos receber.
As bibliotecas de Element.js, dentro do pacote chamado NATIVE, contém vários métodos que podemos invocar sobre os objetos element, para realizar coisas com eles, analisá-los ou alterar seu estado. Nós vamos utilizar dois métodos de Element:
Método setOpacity()
É para alterar a transparência de um elemento. Recebe um valor entre 0 e 1 para definir quanto de opaco ou transparente que é um elemento. O valor 0 é transparente e o valor 1 é completamente opaco.
Método setStyle()
Para alterar qualquer estilo CSS do elemento. Recebe dois parâmetros, o primeiro o nome do estilo e o segundo o valor do estilo.
Com estes dados, já conhecemos tudo que devemos saber de Mootools para entender o seguinte exemplo.
Primeiro, vou colocar um link ao
exemplo em funcionamento para que se veja o que fizemos.
O código do exemplo é o seguinte:
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>exemplo básico com mootools</title>
<script src="mootools-comprimido-1.11.js" type="text/javascript"></script>
<script>
window.addEvent('domready', function(){
opaco_atual = 0;
camada_transicao = null;
carregado = true;
});
</script>
</head>
<body>
<div id="texto_apresentacao">Olá, isto é um texto para fazer uma prova com Mootools. Simplesmente estou alterando propriedades do DIV onde está este texto.</div>
<br>
<form>
<input type="button" value="Opacidade 0%" onclick="$('texto_apresentacao').setOpacity(0);">
<input type="button" value="Opacidade 25%" onclick="$('texto_apresentacao').setOpacity(.25);">
<input type="button" value="Opacidade 50%" onclick="$('texto_apresentacao').setOpacity(.5);">
<input type="button" value="Opacidade 75%" onclick="$('texto_apresentacao').setOpacity(.75);">
<input type="button" value="Opacidade 100%" onclick="$('texto_apresentacao').setOpacity(1);">
<br>
<br>
<input type="button" value="Tamanho 200px" onclick="$('texto_apresentacao').setStyle('width', '200px');">
<input type="button" value="Colocar borda" onclick="$('texto_apresentacao').setStyle('border', '1px solid #ff0000');">
<input type="button" value="Tamanho 50%" onclick="$('texto_apresentacao').setStyle('width', '50%');">
</form>
</body>
</html>
Veremos que incluímos as bibliotecas Mootools no head da página, com um arquivo externo Javascript, carregado com a etiqueta
<script>
.
Também devemos observar que temos uma camada, criada com um
<div>
que tem o atributo id para especificar seu nome: id="texto_apresentacao".
Logo, temos um formulário com uma série de botões, cada um com um código Javascript que se executa quando o usuário clica sobre o botão.
A primeira série de botões alteram a opacidade do elemento.
$('texto_apresentacao').setOpacity(0);
Com $('texto_apresentacao') recebemos um objeto que é o elemento que tinha o id="texto_apresentacao". Logo, sobre esse objeto invocamos o método setOpacity() passando por parâmetro o valor de opacidade. Com isso se muda a transparência da camada.
Logo, temos outra série de botões que alteram alguns atributos de estilo do elemento.
$('texto_apresentacao').setStyle('width', '200px');
Isto altera o atributo CSS width e o muda para o valor de 200px, com o qual a camada texto_apresentacao terá uma largura de 200 pixel.
$('texto_apresentacao').setStyle('border', '1px solid #ff0000');
Com isto alertamos o atributo CSS border, e lhe passamos um novo valor que indica que tenha uma borda sólida de 1 pixel e com a cor vermelha.
$('texto_apresentacao').setStyle('width', '50%');
Com este último mudamos de novo o atributo width para colocar uma largura de 50%, ou seja, a metade do espaço disponível onde está o elemento.
Espero que o exemplo tenha sido suficientemente simples e claro para entender um pouco a facilidade com a que podemos realizar ações, mais ou menos complexas, na página web. Tudo sem nos preocuparmos com as particularidades de cada navegador. Podemos prová-lo em distintos browsers para ver que funciona perfeitamente, ou seja, conseguimos um código cross-browser, compatível com todos os navegadores, com um trabalho quase nulo.
Deixo de novo o
link para ver o exemplo em funcionamento.
