MooTools - Fx.Slide

Fx.Slides 是一个允许您通过滑入视图来显示内容的选项。它非常简单，但增强了用户界面的外观。

让我们讨论创建和初始化 Fx.Slide、其选项和方法。

首先，我们将使用用户定义的实例初始化 Fx.Slide 类。为此，我们必须创建并选择一个 HTML 元素。之后，我们将 CSS 应用于这些元素。最后，我们将使用元素变量启动 Fx.Slide 的新实例。

Fx.幻灯片选项

Fx.Slide 只有两个选项 - 模式和包装器。

模式

模式为您提供两种选择：“垂直”或“水平”。垂直显示从上到下，水平显示从左到右。没有从下到上或从右到左的选项，但我知道破解类本身来完成此操作相对简单。在我看来，这是一个我希望看到标准的选项，如果有人破解了该类以允许此选项，请给我们留言。

包装纸

默认情况下，Fx.Slide 会在幻灯片元素周围抛出一个包装器，赋予其“溢出”：“隐藏”。包装器允许您将另一个元素设置为包装器。就像我上面说的，我不清楚这会在哪里派上用场，并且有兴趣听到任何想法（感谢 mooforum.net 上的 horseweapon 帮助我解决这个问题）。

Fx.Slide 方法

Fx.Slide 还具有多种显示和隐藏元素的方法。

滑入（）

顾名思义，此方法将触发开始事件并显示您的元素。

滑出（）

将您的元素滑回隐藏状态。

切换（）

这会将元素滑入或滑出，具体取决于其当前状态。添加到点击事件的非常有用的方法。

隐藏（）

这将隐藏元素而不产生滑动效果。

展示（）

这将显示没有幻灯片效果的元素。

Fx.幻灯片快捷键

Fx.Slide 类还提供了一些方便的快捷方式来向元素添加效果。

设置（'幻灯片'）

如果您在元素上“设置”幻灯片，则可以创建一个新实例，而不是启动一个新类。

句法

slideElement.set('slide');

设置选项

您甚至可以使用快捷键设置选项 -

句法

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

滑动（）

一旦幻灯片被 .set() 调用，您就可以使用 .slide() 方法启动它。

句法

slideElement.slide('in');

.slide将接受 -

'在'
'出去'
‘切换’
'展示'
'隐藏'

…每一个都对应于上面的方法。

例子

让我们举一个例子来解释 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。观察指标的变化、效果以及事件通知。