Создайте простую систему табуляции mootools 1.2

Question

Я пытаюсь создать очень простой интерфейс вкладки, используя версию mootools 1.2. Мне нужно иметь эффект fadein-fadeout, без скольжения или морфинга. Я попытался найти некоторые демо-версии в Интернете, но все они относятся к разным версиям mootools, или они слишком сложны по сравнению с моими потребностями. Не могли бы вы дать мне некоторые рекомендации?

Это изображение того, что я пытаюсь сделать, и пример кода.

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> 

• мне нужно все вкладки, которые будут скрыты при загрузке страницы.
• каждый раз, когда пользователь нажимает на кнопки DIV/таб это в виду, должны исчезнуть в

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 Forge tab implementations