إنشاء بسيط mootools 1.2 علامة التبويب النظام

Question

أحاول خلق بسيط جدا التبويب واجهة استخدام mootools 1.2 الإصدار.أنا بحاجة إلى fadein-تأثير الاختفاء التدريجي ، أي انزلاق أو تحوير.لقد حاولت أن تجد بعض العروض على الانترنت ولكن جميعها الرجوع إلى إصدارات مختلفة من 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/علامة التبويب تشير إلى أن تتلاشى.

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 Forge ومعرفة ما إذا كان أي من تطبيقات Tab Reservymade تناسب احتياجاتك:

تطبيقات التبويب Mootools Forge