Crie um sistema de guias simples do Mootools 1.2

Question

Estou tentando criar uma interface de abas bem simples usando a versão 1.2 do Mootools.Preciso ter um efeito fadein-fadeout, sem deslizamento ou transformação.Tentei encontrar algumas demonstrações online, mas todas se referem a versões diferentes do mootools ou são muito complicadas em comparação com as minhas necessidades.Você pode me dar algumas orientações?

Esta é uma imagem do que estou tentando fazer e um exemplo de código.

texto alternativo 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>

• Preciso que todas as guias estejam ocultas quando a página for carregada.
• cada vez que o usuário clica em um botão, a div/tab à qual ele se refere deve aparecer gradualmente.

Answer 1

Não é exatamente um trecho de código perfeito, mas deve funcionar:

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

Você também pode pesquisar o MooTools forge e ver se alguma das implementações da guia Readymade atende às suas necessidades:

Implementações da guia MooTools Forge