シンプルな mootools 1.2 タブ システムを作成する

Question

mootools 1.2 バージョンを使用して、非常に単純なタブ インターフェイスを作成しようとしています。フェードイン/フェードアウト効果が必要で、スライドやモーフィングは必要ありません。オンラインでいくつかのデモを見つけようとしましたが、それらはすべて mootools の異なるバージョンを参照しているか、私のニーズに比べて複雑すぎます。いくつかのガイドラインを教えていただけますか?

これは私がやろうとしていることのイメージとサンプルコードです。

代替テキスト 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>

• ページの読み込み時にすべてのタブを非表示にする必要があります。
• ユーザーがボタンをクリックするたびに、それが参照している div/tab がフェードインする必要があります。

Answer 1

未まさに完璧なコードの一部が、仕事をする必要があります：

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

また、MooToolsの鍛造を検索し、既製のタブの実装のいずれかが、あなたのニーズに合うかどうかを確認することができます：

MooToolsはフォージタブ実装する