Principios Básicos do Mootools – Parte 1 | Blog

Principios Básicos do Mootools – Parte 1

Criado por Mateus Souza em 9 de setembro de 2008 às 19:39

Hoje vou começar um artigo sobre os princípios básicos do Mootools, que será dividido em 2 partes pois é muito coisa.Nesta parte do artigo vou começar com os princípios básicos do Mootools.
Em um dos meus posts sobre o mootools(veja aqui), disse o que era o Mootools de deixei uma lista com alguns efeito para se usar, porém eu achei que o post ficou mais pra quem já sabe mexer mesmo com este script.

Bom nesta lição(parte 1) vou mostrar como manipular propriedades do elemento, em particular como começar o elemento DOM do ID como usar o getStyle (), o setStyle () (para ajustar propriedades do CSS), o toInt () para converter uma string em número e alguns exemplos:

1. Adicione a estrutura de Mootools a sua página

moo1 Principios Básicos do Mootools Parte 1

Primeiramente, você tem que “chamar” o Mootools para o HTML dentro do Tag do <head> da página, como fizemos em todos os tutoriais(esse é um processo necessário para qualquer elemento usando o Mootools, JQuery…por isso é importante que você saiba disso):
Este é o código:

<script type=“text/javascript” src=“mootools.svn.js”></script>

Pronto agora já podemos iniciar qualquer efeito usando o mootools.

2.obter um elemento DOM

Para obter um elemento DOM por ID você pode usar a seguinte sintaxe:

var element = $(‘meuElemento’);

… esta linha de código obtém o elemento com ID = “meuElemento” em sua página. Se você tem alguma familiaridade com JavaScript, é quase a mesma coisa para obter um elemento DOM por referência usando o código a seguir:

var element = document.getElementById(‘meuElemento’);

usando $$ você pode obter uma série de elementos DOM dentro de um elemento com um determinado ID:

$$(‘#meuElemento li.minhaListadoElemento’);

… por exemplo, esta linha de código retorna um array de todas as tags <li> com a class = “minhaListadoElemento” dentro do DOM elemento com ID = “meuElemento”.

3. setStyle() e Style()

Estes são dois métodos básicos para definir e obter a propriedade de um elemento(altura, plano de fundo, cor …).Para definir uma propriedade deve-se usar o seguinte código:

$(“meuElemento”).setStyle(“height”, “200px”)

… ou se você tem várias propriedades para definir você precisa usar o código a seguir:

$(“meuElemento”).setStyles({
background: “#DEDEDE”,
border:“solid 1px #999999″,
width: “700px”
height: “80px”
});

Para obter uma propriedade que você pode usar getStyle () especificando o que deseja obter (altura, plano de fundo, cor …)ex.:

$(“meuElemento”).getStyle(“height”)

O código retorna a altura do elemento DOM com ID = “meuElemento”, por exemplo, “200px”. Se você quiser que o número (200 e não “200px”) você tem que usar o seguinte codigo:

$(“meuElemento”).getStyle(“height”).toInt()

…, desta maneira, o valor retornado será um número (200).

4. Javascript

Agora, nós podemos começar ver como escrever o código do Javascript usando MooTools, vamos separar o índice da página do código do Javascript, usando o seguinte código:

<script type=“text/javascript”>
window.addEvent(‘domready’, function() {
/ / Algumas linhas de código aqui …
});
</script>

Por exemplo, gostaria de escrever um script simples que mostre uma mensagem “Olá, Mundo!” Quando um usuário clicar em um link com a ID = “meuElemento”. O script é:

<script type=“text/javascript”>
window.addEvent(‘domready’, function() {
$(‘meuElemento’).addEvent(‘click’, function() {
alert(‘Olá Mundo!’);
});
});
</script>

… eo código HTML:

<a href= “home.html” id= “meuElemento”>
clique aqui!
</a>

Usamos somente isso em vez de um código “importuno” com evento do onClick que chama uma função (por exemplo doSomething ()) adicionado dentro do Tag do <a>Ex.:

<a href= “home.html” id= “meuElemento” onClick= “javascript:doSomething()”>
clique aqui! </a>

Bom axo que basicamente entenderam o que eu escrevi, agora vamos aos exemplos(prática):

Exemplo 1: mude a cor do fundo

Vamos escrever um simples código que mudar a cor de fundo de uma camada com ID = “minhaLayer”:

moo2 Principios Básicos do Mootools Parte 1

O código do HTML(desta forma ou coisa do tipo):

<div id=“minhaLayer”>
<a href=“#” id=“meuElemento”>Mudar cor de fundo</a>
</div>

… como você pode ver, você não chama uma função do Javascript usando um evento (onClick, o onFocus…) dentro do Tag do <a>. A referência ao elemento DOM “myLayer” será inserir o seguinte script em que você tem que adicionar à estrutura do MooTools na Tag do <head> (etapa 1);

<script type=“text/javascript”>
window.addEvent(‘domready’, function() {
$(‘meuElemento’).addEvent(‘click’, function() {
$(‘minhaLayer’).setStyle(‘background’, ‘#DEDEDE’);
});
});
</script>

Ficando assim, para maior compreenção:

<script type=“text/javascript” src=“mootools.svn.js”></script>

<script type=“text/javascript”>
window.addEvent(‘domready’, function() {
$(‘meuElemento’).addEvent(‘click’, function() {
$(‘minhaLayer’).setStyle(‘background’, ‘#DEDEDE’);
});
});
</script>

Exemplo 2: alterar e redefinir a cor de fundo

Agora vamos modificar o código anterior e torná-lo um pouco mais complexo.

Quando o usuário clica no link “Mudar cor de fundo” será alterada a cor e logo depois voltara para a cor padrão.

moo3 Principios Básicos do Mootools Parte 1

O código HTML será o mesmo do exemplo 1.

E o Javascritpt ficará da seguinte forma:

<script type=“text/javascript”>
window.addEvent(‘domready’, function() {
$(‘meuElemento’).addEvent(‘click’, function() {
var currentBgColor = $(‘myLayer’).getStyle(‘background’);
if(currentBgColor==”){
$(‘minhaLayer’).setStyle(‘background’, ‘#DEDEDE’);
} else {
$(‘minhaLayer‘).setStyle(‘background’, ‘#FFFFFF’);
}
});
});
</script>