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。观察指示器上的变化、效果和事件通知。

打印页面