Создайте простую систему вкладок mootools 1.2

Я пытаюсь создать очень простой интерфейс вкладок, используя версию 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, на который он ссылается, должен исчезать.

tabs fadein fadeout mootools
person zekia    schedule 25.01.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Не совсем идеальный фрагмент кода, но он должен выполнять свою работу:

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);
      });
  });
})​;​
person Community    schedule 25.01.2010
comment
Бартек Гарбиак, спасибо за ответ. К сожалению, код не работает должным образом. Кстати, я использую версию mootools 1.2.0 (files.codes-sources.com/). Я также добавил теги ссылок в html-код, чтобы он выглядел более корректно. - person zekia; 26.01.2010
comment
Обновление: Хорошо, теперь все работает нормально. Спасибо большое за помощь :) - person zekia; 26.01.2010

arrow_upward
1
arrow_downward

Вы также можете выполнить поиск в mootools forge и посмотреть, подходит ли вам какая-либо из готовых реализаций вкладок:

Реализации вкладок Mootools Forge

person plouh    schedule 02.02.2010