Blog: Desarrollo web

Ocultando elementos de lista con MooTools

Publicado el: 19/01/2009 en: Desarrollo web | Añadir Comentario

Queremos obtener el siguiente efecto: cuando un usuario haga clic en un enlace (?Ocultar?), el elemento <li> asociado desaparece con un bonito efecto slide-out. Una forma sencilla de implementar una desaparición animada como ésta es usando MooTools slideOut(), que se activa al pinchar en un enlace contenido en el <li> de la lista. Este tutorial explica cómo implementarlo con sólo cinco líneas de código javascript.

Lo primero que necesitamos es implementar una lista (id="milista") con elementos etiquetados con identificadores progresivos (l1, l2, l3, l4, l5) y el enlace ?Ocultar? en cada uno de ellos.

Aquí está el código javascript que habilita el efecto slideOut():

<script>
window.addEvent(’domready’, function() {
/* From the list with ID myList, for each li element of the list…: */
$(’myList’).getElements(’li’).each(function(e){
/* …get the ID of the selected item */
e.getElement(’a').addEvent(’click’, function(listID){
/* Enable Fx.Slide effect for the selected item */
var list_element = new Fx.Slide(listID);
/* Enable slideOut() effect */
list_element.slideOut()
}.pass(e.id));
});
});
</script>

Ver demostración

Visto en | Noupe.com