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

Question

J'essaie de créer une interface d'onglet très simple en utilisant la version mootools 1.2. Je dois avoir un effet de fadein-fadeout, pas de glissement ou de morphing. J'ai essayé de trouver des démos en ligne mais elles se réfèrent toutes à des versions différentes de mootools ou elles sont trop compliquées par rapport à mes besoins. Pouvez-vous s'il vous plaît me donner quelques lignes directrices?

Ceci est une image de ce que j'essaie de faire et un exemple de code.

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> 

• J'ai besoin tous les onglets pour être cachés lors de chargement de la 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 doit 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 recherche MooTools forge et voir si l'une des implémentations de l'onglet prêts à l'emploi qui répondent à vos besoins:

Mootools Forge tab implementations