Crear un sistema de simples mootools 1.2 pestaña

Question

Estoy tratando de crear una interfaz muy simple de tabulación con la versión 1.2 mootools. Necesito tener un efecto FadeIn-desvanecimiento, sin deslizamiento o morphing. He tratado de encontrar algunas demostraciones en línea, pero todos ellos se refieren a diferentes versiones de mootools o que son demasiado complicadas comparando con mis necesidades. ¿Me podría dar algunas pautas?

Esta es una imagen de lo que estoy tratando de hacer y un código de ejemplo.

alt text http://img204.imageshack.us/img204/4983/tabsd .jpg

<ul id="buttons">
     <li><a href="#">button 1</a></li>
     <li><a href="#">button 2</a></li>
     <li><a href="#">button 3</a></li>
     <li><a href="#">button 4</a></li>
</ul>

<div id="tab1">content for button 1</div>
<div id="tab2">content for button 2</div>
<div id="tab3">content for button 3</div>
<div id="tab4">content for button 4</div>

• Necesito todas las pestañas que se oculta cuando se carga la página.
• cada vez que el usuario hace clic en un botón, el / div pestaña que se está refiriendo a debe desaparecer en.

Answer 1

No es exactamente una pieza perfecta de código, pero debe hacer el trabajo:

window.addEvent('domready',function(){

  var tabs = $$('div[id^="tab"]');
  tabs.fade('hide');

  $$('#buttons li').each(function(element,index){
      element.addEvent('click',function(){
          tabs.fade(0);
          tabs[index].fade(1);
      });
  });
})​;​

Answer 2

También puede buscar mootools forja y ver si alguna de las implementaciones de la ficha readymade se adapte a sus necesidades:

Mootools Forge pestaña implementaciones