Micaela 16 de Diciembre de 2008 a las 10.05
   Imprimir artículo
elWebmaster.com

Elegante efecto para ocultar items de una lista con JavaScript

Trucos, javascript, efectos, mootools, lista

Seguramente muchas veces te has preguntado cu谩l ser铆a una forma sencilla de implementar un efecto de desaparici贸n animado para un elemento de una lista cuando un usuario hace clic en un link que est茅 contenido en un elemento <li> de dicha lista.

Desde el blog Woork nos traen una verdaderamente sencilla soluci贸n que mediante la implementaci贸n del efecto slideOut() de MooTools nos permitir谩 resolver f谩cilmente este inconveniente.

Antes que nada deberemos descargar la 煤ltima versi贸n de MooTools y a帽adir un link al framework en el head de nuestro sitio, de esta forma:

PLAIN TEXT
  1. <script type="text/javascript" src="mootools.js"></script>

El c贸digo HTML:

Es como si implement谩ramos una simple lista de productos y a cada uno le a帽adiremos un link 鈥渉ide鈥.

PLAIN TEXT
  1. <ul id="myList">
  2. <li id="l1">Playstation | <a href="#">Hide</a></li>
  3. <li id="l2">iPod Touch | <a href="#">Hide</a></li>
  4. <li id="l3">XBOX 360 | <a href="#">Hide</a></li>
  5. <li id="l4">Nokia N97| <a href="#">Hide</a></li>
  6. <li id="l5">Dell Inspiron | <a href="#">Hide</a></li>
  7. </ul>

Y finalmente, debemos copiar y pegar este c贸digo para habilitar 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>

Fuente: Woork


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesi贸n