Joomla Brasileiro! - Templates , extensões, módulos, plugins, componentes, tutoriais, dicas, temas grátis, Loja virtual, Virtuemart, e-commece, comércio eletrônico, serviços web.principios-basicos-do-mootools-parte-1 | tutoriais

Principios Básicos do Mootools - Parte 1

Escrito por Mateus Baiano

Principios Básicos do Mootools - Parte 1

Hoje, como meu primeiro artigo aqui no site vou começar um artigo sobre os princípios básicos do Mootools, que será dividido em 2 partes pois é muito coisa, porem para um melhor entendimnto é necessário saber pelo menos o básico do javascript e um pouco sobre o Mootools.
O amigo Daniel Kaiser postou sobre alguns frameworks neste post aqui. recomendo que você leia para enterder melhor o que é um framework e quais são os principais frameworks disponiveis no mercado e especialmente sobre o Mootools, no aqul será usado este tutorial.

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

Primeiramente, você tem que “chamar” o Mootools para o HTML dentro do Tag do <head> da página, como firemos em todos os futuros 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 o 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”:

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.

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>

Espero que tenham entendido e que tenham gostado, pois eu me “matei” pra fazer este artigo.Até a próxima.

Adicione esta página a suas Redes Sociais favoritas.

| Mais...

Comentários

0 #3 Lumias 24/05/2011 23:33

Poxa tbem n entendi muito bem onde vai cada coisa. Mas já esclareceu muita coisa. Obrigado!

Citação

0 #2 Rodrigo Mendes 02/03/2011 14:56

Boa tarde, estou com o seguinte problema no mootools quando carrega o slideshow desse site pelo ie. http://www.adubar.org.br/portal . Alguém pode me ajudar?

Detalhes dos erros da página da Web

Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Carimbo de data/hora: Wed, 2 Mar 2011 17:55:51 UTC

Mensagem: 'null' é nulo ou não é um objeto
Linha: 1
Caractere: 9945
Código: 0
URI: http://www.adubar.org.br/portal/plugins/system/mtupgrade/mootools.js

Mensagem: O objeto não dá suporte para a propriedade ou método
Linha: 1
Caractere: 35321
Código: 0
URI: http://www.adubar.org.br/portal/plugins/system/mtupgrade/mootools.js

Citação

0 #1 Edilson Silva Junior 08/12/2010 11:01

pô cara não entendi quase nada do que você escreveu ai, não que eu esteja desmerecendo o sacrifício que você teve pra fazer ai mais ta faltando colocar onde que coloca cada coisa, pra quem ta começando agora fica complicado de entender... Valeu pela atenção