MooTools - Fx.Slide

Fx.Slides 是一種選項，允許您透過滑動顯示內容。它非常簡單，但可以增強UI的外觀。

讓我們討論一下建立和初始化 Fx.Slide、其選項和方法。

首先，我們將使用使用者定義的例項初始化 Fx.Slide 類。為此，我們必須建立並選擇一個HTML元素。之後，我們將向這些元素應用CSS。最後，我們將使用元素變數啟動 Fx.Slide 的新例項。

Fx.Slide 選項

只有兩個 Fx.Slide 選項——mode 和 wrapper。

模式 (Mode)

Mode 提供兩種選擇，“vertical”（垂直）或“horizontal”（水平）。垂直方向從上到下顯示，水平方向從左到右顯示。沒有從下到上或從右到左的選項，儘管我知道修改類本身來實現這一點相對簡單。在我看來，這是一個我希望看到的標準選項，如果有人已經修改了類以允許此選項，請給我們留言。

包裝器 (Wrapper)

預設情況下，Fx.Slide 會在您的滑動元素周圍新增一個包裝器，使其具有“overflow”: “hidden” 屬性。Wrapper 允許您將另一個元素設定為包裝器。正如我上面所說，我不清楚這在什麼情況下會派上用場，並且很樂意聽到任何想法（感謝 mooforum.net 上的 horseweapon 幫助我理清了這一點）。

Fx.Slide 方法

Fx.Slide 還具有許多用於顯示和隱藏元素的方法。

slideIn()

顧名思義，此方法將觸發開始事件並顯示您的元素。

slideOut()

將您的元素滑回隱藏狀態。

toggle()

這將根據元素的當前狀態將其滑入或滑出。非常有用的方法，可以新增到點選事件中。

hide()

這將隱藏元素，不帶滑動效果。

show()

這將顯示元素，不帶滑動效果。

Fx.Slide 快捷方式

Fx.Slide 類還提供了一些方便的快捷方式，用於向元素新增效果。

set(‘slide’)

無需初始化新類，如果在元素上“設定”slide，您可以建立一個新例項。

語法

slideElement.set('slide');

設定選項

您甚至可以使用快捷方式設定選項 -

語法

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

slide()

一旦 slide 被 .set()，您可以使用 .slide() 方法啟動它。

語法

slideElement.slide('in');

.slide 將接受 -

‘in’
‘out’
‘toggle’
‘show’
‘hide’

…每個都對應於上面的方法。

示例

讓我們來看一個解釋 Fx.Slide 的示例。請檢視以下程式碼。

<!DOCTYPE html>
<html>
   
   <head>
      <style>
         .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: #F9E79F;
         }
         #slide_wrap {
            padding: 30px;
            background-color: #D47000;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var slideElement = $('slideA');
            
            var slideVar = new Fx.Slide(slideElement, {
               //Fx.Slide Options
               mode: 'horizontal', //default is 'vertical'
               
               //wrapper: this.element, //default is this.element
               //Fx Options
               link: 'cancel',
               transition: 'elastic:out',
               duration: 'long', 
               
               //Fx Events
               onStart: function(){
                  $('start').highlight("#EBCC22");
               },
               
               onCancel: function(){
                  $('cancel').highlight("#EBCC22");
               },
               
               onComplete: function(){
                  $('complete').highlight("#EBCC22");
               }
            }).hide().show().hide(); //note, .hide and .show do not fire events 

            $('openA').addEvent('click', function(){
               slideVar.slideIn();
            });

            $('closeA').addEvent('click', function(){
               slideVar.slideOut();
            });

            //EXAMPLE B
            var slideElementB = $('slideB');
            var slideVarB = new Fx.Slide(slideElementB, {
            
               //Fx.Slide Options
               mode: 'vertical', //default is 'vertical'
               link: 'chain', 
               
               //Fx Events
               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();
            });
         });
      </script>
   </head>

   <body>
      <div id = "start" class = "ind">Start</div>
      <div id = "cancel" class = "ind">Cancel</div>
      <div id = "complete" class = "ind">Complete</div>
 
      <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>
         
   </body>
</html>

輸出

點選按鈕——openA、closeA、openB 和 closeB。觀察指示器上的變化、效果和事件通知。

列印頁面