Créer un simple Mootools 1.2 système d'onglets

Question

Je suis en train de créer une interface très simple onglet en utilisant la version Mootools 1.2. Je dois avoir un effet fadein-fadeout, sans glissement ou morphing. J'ai essayé de trouver quelques démos en ligne, mais ils se réfèrent tous à différentes versions de Mootools ou ils sont trop compliqués à mes besoins comparais. Pouvez-vous s'il vous plaît me donner quelques conseils?

Ceci est une image de ce que je suis en train de faire et un exemple de code.

texte alt 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>

• J'ai besoin tous les onglets pour être cachés lorsque les charges de page.
• chaque utilisateur clique sur un bouton, la div / onglet, il fait référence à devrait disparaître dans.

Answer 1

Pas exactement un morceau parfait de code, mais devrait faire le travail:

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

Vous pouvez également rechercher MooTools Forge et voir si l'une des implémentations de l'onglet prêts à l'emploi qui répondent à vos besoins:

implémentations onglet Mootools Forge