Princípios Básicos do Mootools – Parte 2 | Blog

Princípios Básicos do Mootools – Parte 2

Criado por Mateus Souza em 13 de setembro de 2008 às 9:54

Olá pessoal, vamos continuar nossa aula sobre os Princípios Básicos do Mootools, em nosso artigo anterior falei sobre:

Como adicionar uma estrutura de Mootools em uma página;
Como obter um elemento DOM;
Falei sobre setStyle() e Style();
E dei alguns exemplos na prática.

Se você ainda não viu a parte 1 deste artigo, veja aqui.Vamos a parte 2:

Nesta parte do artigo vamos identificar um elemento (ID) e vamos personaliza-lo (fundo, exibir uma mensagem de alerta …) usando o Mootools:

1.Implementação Inoportuna:

Vamos começar escrevendo um código em HTML, e logo depois direi porque é inoportuna:

<ul id=“myList”>
<li id=“li_1″>
<a href=“#” onClick=“javascript:getId(’1′)”>Get this ID</a>
</li>
<li id=“li_2″>
<a href=“#” onClick=“javascript:getId(2)”>Get this ID</a>
</li>
<li id=“li_3″>
<a href=“#” onClick=“javascript:getId(3)”>Get this ID</a>
</li>
</ul>

Este é uma lista simples com alguns elemento da lista id “li_1“, “li_2“, “li_3“.Cada elemento da lista contem um link solicitando o evento onClick do javascript e uma função getid().Com isto será exibido uma simples caixa de alerta com o ID do elemento que você clicou.O que aparecerá será mais ou menos isto:

mootools3 Princípios Básicos do Mootools Parte 2

O código javascript é este(está em inglês mais decidi deixa-lo, pois acho que não vai atrapalhar nossa lição):

<script type=“text/javascript”>
function getId(el){
var listElement = el;
alert(“The ID of the list element you’ve chosen is: li_”+listElement);
}
</script>

… é muito facil de se entender, se você tem noções básicas de javascript.Vamos chamar este cógido inoportuno, mas porque você me pergunta?Porque, dentro do código do HTML, contem uma solicitação da função getId() do javascript:

<a href=“#” onClick=“javascript:getId(’1′)”>Get this ID</a>

Esta forma “inoportuna” não é errada, mais nos usaremos de forma que separe o HTML do Javascript, melhorando assim a vida de todos,hehehe

2. A forma discreta para implementá-lo usando Mootools.

Ok, agora estamos prontos para ver como podemos aplicar o mesmo script usando o Mootools discretamente. Em primeiro lugar,vamos analizar o código do HTML:

<ul id=“myList”>
<li id=“li_1″><a href=“#”>Get this ID</a></li>
<li id=“li_2″><a href=“#”>Get this ID</a></li>
<li id=“li_3″><a href=“#”>Get this ID</a></li>
</ul>

Mais o que mudou?Simples removemos o evento onClick do HTML:

<li id=“li_1″><a href=“#” onClick=”javascript:getId(’1′)” >Get this ID</a></li>

Até aqui tudo certo, agora vamos voltar a um trecho da parte 1 do artigo, você se lembra como adicionar uma estrutura de Mootools no HTML?Não?Vou colocar a imagem aqui novamente, talvez você se lembre:

moo1 Princípios Básicos do Mootools Parte 2

Bom, como você já deve saber é basicamente isto que temos de colocar logo depois da tag <head> do HTML:

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

Agora copie e cole este código logo abaixo do que esta acima:

<script type=“text/javascript”>
window.addEvent(‘load’, function(){
$(‘myList’).getElements(‘li’).each(function(el){
el.getElement(‘a’).addEvent(‘click’, function(listID){
alert(“The ID of the list element you’ve chosen is: “+listID);
}.pass(el.id)
);
});
});
</script>

Como você pode ver, eu usei o método getElements () para obter todas as tags <li> <ul> lista com ID “myList”.Assim quando você clicar em um dos links aparecerá a caixa de alerta falando qual elemento você escolheu, passando a identificar usando o método .pass(el.id).
Espero que tenham entendido e até a proxima.