Creare un MooTools semplice sistema 1.2 scheda

Question

Sto cercando di creare un interfaccia molto semplice scheda utilizzando la mootools versione 1.2. Ho bisogno di avere un effetto fadein-dissolvenza, senza scorrevoli o morphing. Ho cercato di trovare alcuni demo online, ma si riferiscono tutti a diverse versioni di MooTools o sono troppo complicate paragonando alle mie esigenze. Potete per favore darmi qualche guida?

Questa è l'immagine di quello che sto cercando di fare e di un codice di esempio.

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>

• Ho bisogno tutte le schede da nascondere quando caricamento della pagina.
• ogni volta che l'utente fa clic su un pulsante, il div / scheda si riferisce a deve svanire in.

Answer 1

Non esattamente un perfetto pezzo di codice, ma dovrebbe fare il lavoro:

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

E 'possibile MooTools forgiare e vedere se una delle implementazioni scheda readymade adatto alle vostre esigenze:

Mootools Forge implementazioni scheda