Erstellen Sie eine einfache Mootools 1.2 Registerkarte System

Question

Ich versuche, eine sehr einfache Tab Schnittstelle 1.2 mit der Mootools Version zu erstellen. Ich brauche eine FadeIn-fadeout Wirkung haben, keine Schiebe- oder Morphing. Ich habe versucht, einige Demos online zu finden, aber sie alle beziehen sich auf verschiedene Versionen von Mootools oder sie sind zu kompliziert zu vergleichen, um meine Bedürfnisse. Können Sie einige Richtlinien geben Sie mir bitte?

Dies ist ein Bild von dem, was ich versuche, und ein Beispielcode zu tun.

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>

• Ich brauche alle Registerkarten ausgeblendet werden, wenn Seite geladen wird.
• jedes Mal Benutzer klickt auf eine Schaltfläche, die div / Tab es unter Bezugnahme auf sollte verblassen.

Answer 1

Nicht gerade ein perfektes Stück Code soll aber die Arbeit machen:

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

Sie können auch Mootools Schmiede und sehen, ob einer der Readymades Registerkarte Implementierungen passen Ihren Bedarf suchen:

Mootools Forge Registerkarte Implementierungen