Menu

30天學會 MooTools 教學(20): Tab 標籤頁

今天將不只是受限於這個庫和一些基本的編程知識，我們來做一個簡單的小項目。通過使用我們目前為止已經學過的一些知識，有幾種方式來創建當鼠標移上去或者點擊時顯示相應內容的tab。

 

 

簡單的「額外信息」標籤（TAB）

鼠標移上去顯示內容的TAB

在這第一個項目中，我們要創建一個簡單的菜單，當鼠標移動到這些菜單上時顯示相應的內容。首先，我們來完成HTML代碼——我們就用包含四個列表項的ul好了，然後再創建四個div（每一個div對應一個列表項）： 

// 這裡是我們的菜單  
 <ul id="tabs">  
      <li id="one">One</li>  
      <li id="two">Two</li>  
      <li id="three">Three</li>  
      <li id="four">Four</li>  
 </ul>  
 
 // 這裡是我們的內容div  
 <div id="contentone" class="hidden">content for one</div>  
 <div id="contenttwo" class="hidden">content for two</div>  
 <div id="contentthree" class="hidden">content for three</div>

現在，我們不需要關心怎麼把它們做得漂亮。在CSS中，我們要做的全部事情就是把內容區塊隱藏起來： 

.hidden {  
      display: none;

好了，現在開始寫MooTools代碼。如果我們需要當用戶把鼠標移上去的時候顯示內容，當鼠標離開的時候隱藏內容，我們需要完成這樣兩個函數： 

var showFunction = function() {  
      this.setStyle('display', 'block');  
 }  
 
 var hideFunction = function() {  
      this.setStyle('display', 'none');

還有一些事件： 

window.addEvent('domready', function() {  
      // 這裡我們可以把容器元素賦值給一個變量  
      var elOne = $('contentone');  
 
      $('one').addEvents({  
          // 當鼠標進入的時候，我們調用showFunction  
          // 並綁定這個元素elOne  
          // 因此我們需要把它作為函數參數  
          'mouseenter': showFunction.bind(elOne),  
          'mouseleave': hideFunction.bind(elOne)  
      });

現在，我們只需要為每個tab重複這個模式，並指定對應的內容區塊就可以了。下面是完整的代碼： 

// 這裡是用來改變樣式的函數  
 var showFunction = function() {  
      this.setStyle('display', 'block');  
 }  
 
 var hideFunction = function() {  
      this.setStyle('display', 'none');  
 }  
 
 window.addEvent('domready', function() {  
      // 在這裡我們把我們的內容塊賦值給不同變量  
      var elOne = $('contentone');  
      var elTwo = $('contenttwo');  
      var elThree = $('contentthree');  
      var elFour = $('contentfour');  
 
      // 給tab綁定事件  
      $('one').addEvents({  
          // 設置事件類型  
          // 並給事件控制函數綁定相應的變量  
          'mouseenter': showFunction.bind(elOne),  
          'mouseleave': hideFunction.bind(elOne)  
      });  
 
      $('two').addEvents({  
          'mouseenter': showFunction.bind(elTwo),  
          'mouseleave': hideFunction.bind(elTwo)  
      });  
 
      $('three').addEvents({  
          'mouseenter': showFunction.bind(elThree),  
          'mouseleave': hideFunction.bind(elThree)  
      });  
 
      $('four').addEvents({  
          'mouseenter': showFunction.bind(elFour),  
          'mouseleave': hideFunction.bind(elFour)  
      });


正如你所看到的，這一切看起來都非常的熟悉，完成這些並不需要任何我們目前為止沒有學過的東西。

借鑑上面的想法，我們可以很輕鬆地調整它為點擊時顯示內容。我們就使用上面的HTML，然後修改一下MooTools代碼，以完成點擊事件。

首先，我們需要調整一下我們的函數。由於我們不能在鼠標離開時把內容隱藏起來，因此，我們需要換一種方式來切換這些div。可能最容易的選擇是在點擊時首先把它們全部隱藏起來，然後只把this（通過click事件傳遞進來的對象）所指的當前的內容顯示出來。 

var showFunction = function() {  
      $$('.hiddenB').setStyle('display', 'none');    
      this.setStyle('display', 'block');  
 }


現在，當我們通過把元素綁定到一個函數上來傳遞這個變量時，它將隱藏其他的區塊，並顯示當前的區塊。

接下來，我們還需要調整一下我們的事件。首先，我們只需要一個事件了，因此我們使用.addEvent();方法，然後還需要改變事件的類型為「click」。 

window.addEvent('domready', function() {  
      var elOneB = $('contentoneB');  
      var elTwoB = $('contenttwoB');  
      var elThreeB = $('contentthreeB');  
      var elFourB = $('contentfourB');  
 
      $('oneB').addEvent('click', showFunction.bind(elOneB));  
      $('twoB').addEvent('click', showFunction.bind(elTwoB));  
      $('threeB').addEvent('click', showFunction.bind(elThreeB));  
      $('fourB').addEvent('click', showFunction.bind(elFourB));


給Tab的內容塊加上形變

通過擴展我們上面的代碼，我們可以添加一些形變效果來顯示我們隱藏的內容區塊。首先，我們可以像以前那樣創建一個Fx.Morph效果，不過在這裡要設置不同的樣式。當然，我們還需要創建我們的形變（Morph）對象：

參考代碼：  

var showFunction = function() {  
      // 在形變之前初始化所有樣式  
      $$('.hiddenM').setStyles({  
          'display': 'none',  
          'opacity': 0,  
          'background-color': '#fff',  
          'font-size': '16px'  
      });    
 
      // 在這裡開始形變，並指定形變後的樣式  
      this.start({  
          'display': 'block',  
          'opacity': 1,  
          'background-color': '#d3715c',  
          'font-size': '31px'  
      });  
 }  
 
 window.addEvent('domready', function() {  
      var elOneM = $('contentoneM');  
      var elTwoM = $('contenttwoM');  
      var elThreeM = $('contentthreeM');  
      var elFourM = $('contentfourM');  
 
      // 創建一個形變對象  
      elOneM = new Fx.Morph(elOneM, {  
          link: 'cancel'  
      });  
      elTwoM = new Fx.Morph(elTwoM, {  
          link: 'cancel'  
      });  
      elThreeM = new Fx.Morph(elThreeM, {  
          link: 'cancel'  
      });  
      elFourM = new Fx.Morph(elFourM, {  
          link: 'cancel'  
      });  
 
      $('oneM').addEvent('click', showFunction.bind(elOneM));  
      $('twoM').addEvent('click', showFunction.bind(elTwoM));  
      $('threeM').addEvent('click', showFunction.bind(elThreeM));  
      $('fourM').addEvent('click', showFunction.bind(elFourM));


注意：如果你快速地點擊上面的示例，你將看的會同時出現多個內容區塊。從根本上講，如果showFunction在上一個形變完成之前調用，它將不會隱藏其他的區塊內容。要解決這個問題，我們需要打破這一規則，並充分利用Fx.Elements。


代碼示例

下面的這個示例和上面的示例差不多，不過當你快速地點擊兩個tab時，將不會同時出現多個內容div。 

// 創建一個隱藏所有元素的函數  
 // 你可以把元素作為參數傳遞進來  
 var hideAll = function(fxElementObject){  
      fxElementObject.set({  
          '0': {  
              'display': 'none'  
          },  
          '1': {  
              'display': 'none'  
          },  
          '2': {  
              'display': 'none'  
          },  
          '3': {  
              'display': 'none'  
          }  
      });  
 }  
 
 // 這裡我們為每個內容區塊創建一個函數  
 var showFunctionOne = function() {  
      // 首先，調用函數hideAll  
      // 然後Fx.element對象的引用「this」作為參數傳入  
      hideAll(this);  
 
      // 開始相應元素的Fx.element形變動畫  
      this.start({  
          '0': {  
              'display': ['none', 'block'],  
              'background-color': ['#fff', '#999'],  
              'font-size': ['16px', '25px']  
          }  
      });  
 }  
 
 var showFunctionTwo = function() {  
      hideAll(this);  
 
      this.start({  
          '1': {  
              'display': ['none', 'block'],  
              'background-color': ['#fff', '#999'],  
              'font-size': ['16px', '25px']  
          }  
      });  
 }  
 
 var showFunctionThree = function() {  
      hideAll(this);  
 
      this.start({  
          '2': {  
              'display': ['none', 'block'],  
              'background-color': ['#fff', '#999'],  
              'font-size': ['16px', '25px']  
          }  
      });  
 }  
 
 var showFunctionFour = function() {  
      hideAll(this);  
 
      this.start({  
          '3': {  
              'display': ['none', 'block'],  
              'background-color': ['#fff', '#999'],  
              'font-size': ['16px', '25px']  
          }  
      });  
 }    
 
 window.addEvent('domready', function() {  
      // 建立一個數組來保存Fx.elements  
      var morphElements = $$('.hiddenMel');  
 
      // 創建一個新的Fx.Element對象  
      var elementEffects = new Fx.Elements(morphElements, {  
             // 設置"link"選項的值為cancel  
          link: 'cancel'  
      });    
 
      $('oneMel').addEvent('click', showFunctionOne.bind(elementEffects));  
      $('twoMel').addEvent('click', showFunctionTwo.bind(elementEffects));  
      $('threeMel').addEvent('click', showFunctionThree.bind(elementEffects));    
      $('fourMel').addEvent('click', showFunctionFour.bind(elementEffects));    
 });

 

更多學習

這篇教程更多地是複習和應用我們在以前的教程中 學些的東西。因此，如果你還麼准備好，我們建議你全面閱讀相應的文檔。這比聽起來的會更有趣。如果你是剛接觸這個庫的，但是一直在學習這一系列的教程，你 可能會對你瞭解的程度非常的驚訝。（Fdream註：這個意思就是說，這一系列的教程中，覆蓋的內容還不夠全面，因此強烈建議大家仔細閱讀全部文檔。）

遠程下載：下載最後一個示例的代碼 （44.44 KB）

 

Mootools 教學列表：