Mais funcionalidades de Element

Continuamos oferecendo explicações sobre métodos da classe Element de Mootols: empty(), destroy() e clone().

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 22/7/09
Valorize este artigo:
Continuamos com as explicações da classe Element, marcadas no Manual de Mootools que estamos publicando em CriarWeb.com. A seguir veremos outros métodos interessantes da classe Element.

Método empty()

Este método serve para eliminar os conteúdos que haja dentro de um elemento da página. Quando nos referimos aos conteúdos falamos de todo o texto que houver dentro da etiqueta e todas as etiquetas que puder ter, entre a abertura e fechamento do elemento.

Por exemplo, temos este elemento:

<div id="meuelemento" style="background-color: #ffcc00; padding: 10px;">
<p>Conteúdos do elemento, que logo poderemos apagar!</p>
<a href="http://www.criarweb.com">CriarWeb.com</a>
</div>


Trata-se uma camada DIV que por sua vez tem diversos elementos dentro. Se quisermos apagar tudo o que houver dentro do DIV faríamos isto:

$('meuelemento').empty();

Isto não excluirá a camada "meuelemento", porém sim tudo o que havia dentro.

Podemos ver o exemplo em funcionamento em uma página à parte.

Método destroy()

Vimos que com empty() podemos excluir tudo o que tiver dentro de um elemento, porém se quisermos apagar todos os conteúdos desse elemento e ademais o próprio elemento, devemos utilizar o método destroy().

Vejamos agora este elemento:

<div id="meuelemento" style="background-color: #ffcc00; padding: 10px;">
<p>Conteúdos do elemento, que vamos eliminar completamente.</p>
<a href="http://www.criarweb.com">CriarWeb.com</a>
</div>


Se quisermos eliminá-lo totalmente da página faríamos algo como isto:

$('meuelemento').destroy();

Isto excluirá todo o elemento, ou seja, ele mesmo e tudo o que tiver dentro.

Podemos ver uma página com o exemplo em funcionamento.

Método clone()

Agora veremos um método de Element que permite clonar qualquer elemento que tivermos na página. Este método recebe o elemento que se deseja clonar e devolve uma cópia do mesmo, em uma variável que é um objeto da classe Element.

Por exemplo, temos um elemento como este:

<img src="http://www.criarweb.com/images/logo_desarrollo_web.gif" id="minhaimagem" />

Isto é uma imagem que vamos clonar e para isso faremos o seguinte:

clonada = $('minhaimagem').clone();

Com isto temos uma variável chamada clonada, que dentro contém uma instância de Element, que é uma cópia da imagem que havíamos visto antes. Porém, com isto não obtemos nenhum resultado, porque o elemento imagem simplesmente está em uma variável Javascript da página e não se está visualizando no navegador, a não ser que a injetemos por algum lado.

clonada.inject($('minhaimagem'), 'after');

Com isto a inserimos dentro da página, justo depois da imagem clonada previamente.
Nota: já explicamos como inserir elementos na página em um artigo anterior publicado por criarweb neste manual. Leia o artigo: inserção de um elemento na página.

Podemos ver um exemplo baseado neste código para mostrar o funcionamento do método clone().

Como dissemos em outras ocasiões, a classe Element é a mais rica em funcionalidades de Mootools e ainda existem muitas coisas que teríamos que conhecer. Entretanto, para ir avançando o manual de Mootools de criar web .com e por enquanto, este artigo pretendemos que seja o último no qual vamos tratar a classe Element. No futuro iremos mostrar outros exemplos que com toda certeza aplicarão conhecimentos que relatamos sobre Element, e também coisas novas que deixamos para os próximos capítulos.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato