Menu

30天學會 MooTools 教學(23): 滑動效果（Slide）

譯者：Fanhp，整理：Fdream

今天繼續我們的Mootools 1.2教程的第23課，我們今天來講一下Fx插件中的Fx.Slide。通過該插件，可以讓你把內容以滑動的方式顯示出來。它使用起來非常簡單，是你UI工具箱中一個很好的工具。

 

基本用法

就像我們前面看過的所有類一樣，我們在把這個類應用到一個元素上面時，我們要做的第一件事就是初始化一個新的Fx.Slide實例。

首先，讓我們為滑動元素建立一個HTML文件。 

<div id="slide_element" class="slide">這裡是要滑動顯示的內容。</div>

我們的CSS也不需要任何修飾。 

.slide {  
      margin: 20px 0;  
      padding: 10px;  
      width: 200px;  
      background-color: #DAF7B4;  
 }

最後，我們來初始化一個新的Fx.Slide並給它傳遞我們的元素變量。 

var slideElement = $('slide_element');  
 
 var slideVar = new Fx.Slide(slideElement, {  
      // Fx.Slide選項  
      mode: 'vertical', // 默認是'vertical'（垂直）  
 
      // Fx選項  
      transition: 'sine:in',  
      duration: 300,    
 
      // Fx事件  
      onStart: function(){  
          $('start').highlight("#EBCC22");  
      }

由於Fx.Slide是Fx的一個擴展，因此你可以使用Fx的任何選項和事件，不過Fx.Slide也有一些自己的選項。


Fx.Slide選項

Fx.Slide只有兩個選項——「mode」和「wrapper」。坦白地說，我從來沒有發現我自己使用過「wrapper」（我從來沒有遇到過這種需求），不過「mode」決定了你是希望水平滑動還是垂直滑動。

mode（模式）

模式給了你兩個選擇——「垂直」或者「水平」。垂直是從頂部到底部的顯示，水平是從左邊到右邊的顯示。這裡沒有從底部到頂部或從右邊到左邊的選項。 不過我知道修改類本身來實現這些功能是相對簡單的。在我看來，我還是希望這能成為一個標準的選項，如果有人已經修改了這個類並允許這些選項，請給我們留 言。

wrapper（包裝器）

在缺省情況下，Fx.Slide會在你的滑動元素的外面添加一個包裝器，並指定其「overflow」屬性的值為「hidden」。wrapper 允許你設置其他元素作為該元素的包裝器。就像我上面所說的，我不清楚它在那裡會被用到，我也有興趣聽到任何關於這個東西的想法。（感謝 mooforum.net的horseweapon讓我明白這個一點。）


Fx.Slide的方法

Fx.Slide也提供了許多方法來顯示或者隱藏元素。

.slideIn()

正如名字所告訴你的，該方法講觸發start（開始）時間並顯示你的元素。

.slideOut()

滑動元素到隱藏狀態。

.toggle()

這個方法有可能顯示或者隱藏元素，結果完全取決於這個元素的當前狀態。用於點擊事件時非常有用。

.hide()

這將隱藏元素，但不使用滑動效果。

.show()

這將顯示元素，但不使用滑動效果。


通過方法重新設置模式選項

上面的每個方法均可以接受一個可選的mode參數，允許你覆蓋之前設置的選項。 

slideVar.slideIn('horizontal');


Fx.Slide快捷方式

Fx.Slide類還提供了一些非常方便的快捷方式來給元素添加滑動效果。

.set('slide');

你可以不用初始化一個新類，而通過set方法來給元素添加一個slide對象來創建一個新的slide實例。 

slideElement.set('slide');

設置選項

甚至你還可以通過快捷方式設置選項： 

slideElement.set('slide', {duration: 1250});

.slide()

一旦用.set()方法設置了slide，你就可以用.slide()方法來初始化它。 

slideElement.slide('in');


.slide方法可以接受以下參數：

'in'
'out'
'toggle'
'show'

每一個參數均和上面的方法相對應。


代碼示例

上面所講的這些基本涵蓋了全部基本用法。下面的示例將使用我們上面學到的大部分知識，顯示一些不同的滑動元素，並提供一些div作為指示器，以便你可以清楚地看到這些事件。

首先，創建HTML文件。 

<div id="start" class="ind">Start</div>  
 <div id="cancel" class="ind">Cancel</div>  
 <div id="complete" class="ind">Complete</div>  
 <br /><br />  
 
 <button id="openA">open A</button>  
 <button id="closeA">close A</button>  
 <div id="slideA" class="slide">Here is some content - A. Notice  the delay before onComplete fires.   This is due to the transition  effect, the onComplete will not fire until the slide element stops  "elasticing." Also, notice that if you click back and forth, it will  "cancel" the previous call and give the new one priority.</div>  
 
 <button id="openB">open B</button>  
 <button id="closeB">close B</button>  
 <div id="slideB" class="slide">Here is some content - B. Notice  how if you click me multiple times quickly I "chain" the events.   This  slide is set up with the option "link: 'chain'"</div>  
 
 <button id="openC">toggle C</button>  
 <div id="slideC" class="slide">Here is some content - C</div>  
 
 <button id="openD">toggle D</button>  
 <div id="slideD" class="slide">Here is some content - D. Notice  how I am not hooked into any events.   This was done with the .slide  shortcut.</div>  
 
 <button id="openE">toggle E</button>  
 
 <div id="slide_wrap">  
 <div id="slideE" class="slide">Here is some content - E</div>  
 </div>

 

接下來是CSS文件。我們讓它儘量保持簡單。 

.ind {  
      width: 200px;  
      padding: 10px;  
      background-color: #87AEE1;  
      font-weight: bold;  
      border-bottom: 1px solid white;  
 }  
 
 .slide {  
      margin: 20px 0;    
      padding: 10px;  
      width: 200px;  
      background-color: #DAF7B4;  
 }  
 
 #slide_wrap {  
      padding: 30px;  
      background-color: #D47000;

 

最後，是我們的Mootools JavaScript代碼： 

window.addEvent('domready', function() {  
      // 示例A  
      var slideElement = $('slideA');  
 
      var slideVar = new Fx.Slide(slideElement, {  
          // Fx.Slide選項  
          mode: 'horizontal', // 默認是'vertical'  
          //wrapper: this.element, // 默認是this.element  
 
          // Fx選項  
          link: 'cancel',  
          transition: 'elastic:out',  
          duration: 'long',    
 
          // Fx事件  
          onStart: function(){  
              $('start').highlight("#EBCC22");  
          },  
 
          onCancel: function(){  
              $('cancel').highlight("#EBCC22");  
          },  
 
          onComplete: function(){  
              $('complete').highlight("#EBCC22");  
          }  
      }).hide().show().hide(); // 注意，.hide和.show方法並不觸發事件  
 
      $('openA').addEvent('click', function(){  
          slideVar.slideIn();  
      });  
 
      $('closeA').addEvent('click', function(){  
          slideVar.slideOut();  
      });  
 
      
      // 示例B  
      var slideElementB = $('slideB');  
 
      var slideVarB = new Fx.Slide(slideElementB, {  
          // Fx.Slide選項  
          mode: 'vertical', // 默認是'vertical'  
 
          // Fx選項  
          // 注意：鏈式效果可以讓你多次點擊，  
          // 當鼠標離開後，  
          // 每次點擊的動畫可以依次觸發  
          link: 'chain',    
 
          // Fx事件  
          onStart: function(){  
              $('start').highlight("#EBCC22");  
          },  
 
          onCancel: function(){  
              $('cancel').highlight("#EBCC22");  
          },  
 
          onComplete: function(){  
              $('complete').highlight("#EBCC22");  
          }  
      });  
 
      $('openB').addEvent('click', function(){  
          slideVarB.slideIn();  
      });  
 
      $('closeB').addEvent('click', function(){  
          slideVarB.slideOut();  
      });  
 
      // 示例 C  
      var slideElementC = $('slideC');  
 
      var slideVarC = new Fx.Slide(slideElementC, {  
          // Fx.Slide選項  
          mode: 'vertical', // 默認是'vertical'  
          //wrapper: this.element, // 默認是this.element  
 
          // Fx選項  
          //link: 'cancel',  
          transition: 'sine:in',  
          duration: 300,    
 
 
          // Fx事件  
          onStart: function(){  
              $('start').highlight("#EBCC22");  
          },  
 
          onCancel: function(){  
              $('cancel').highlight("#EBCC22");  
          },  
 
          onComplete: function(){  
              $('complete').highlight("#EBCC22");  
          }  
      }).hide();  
 
      $('openC').addEvent('click', function(){  
          slideVarC.toggle();  
      });  
 
 
      $('slideD').slide('hide');  
 
      $('openD').addEvent('click', function(){  
          $('slideD').slide('toggle');  
      });  
 
      // 示例C  
      var slideElementE = $('slideE');  
      var slideWrap = $('slide_wrap');  
 
      var slideVarE = new Fx.Slide(slideElementE, {  
          // Fx.Slide選項  
          //mode: 'vertical', // 默認是'vertical'  
          wrapper: slideWrap // 默認是this.element  
      }).hide();    
 
      $('openE').addEvent('click', function(){  
          slideVarE.toggle();  
      });


學習更多……

Fx.Slide是一個多功能，非常有用的插件。要學習更多，查看Fx.Slide文檔，Fx.Morph和Fx文檔。

另外，也一定要閱讀一下我們關於Fx.Morph和Fx選項和事件的教程。

 

下載最後示例代碼的zip壓縮文件(36.5KB) 包含你開始所需要的所有東西。

 

Mootools 教學列表：