MooTools - Fx.Slide

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

让我们讨论一下创建和初始化Fx.Slide，它的选项和方法.

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

Fx.Slide选项

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

模式

模式为您提供两种选择，"垂直"或"水平".垂直从上到下显示，水平从左到右显示.没有选择从下到上或从右到左，我知道黑客攻击类本身来实现这一点相对简单.在我看来，这是一个我希望看到标准的选项，如果有人攻击了该类以允许这个选项，请给我们留言.

Wrapper

默认情况下，Fx.Slide会在您的幻灯片元素周围抛出一个包装器，使其"溢出":"隐藏". Wrapper允许您将另一个元素设置为包装器.就像我上面说的那样，我不清楚它会派上用场，并且有兴趣听到任何想法(感谢mooforum.net上的horseweapon帮助我清除它).

Fx.Slide方法

Fx.Slide还提供了许多显示和隐藏元素的方法.

slideIn()

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

slideOut()

幻灯片元素回到隐藏状态.

toggle()

这将根据当前状态滑入或滑出元素.添加到点击事件的非常有用的方法.

hide()

这将隐藏没有幻灯片效果的元素.

show()

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

Fx.Slide快捷方式

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

set('slide')

如果您在元素上设置'幻灯片，则可以创建新实例，而不是启动新类.

语法

  slideElement.set('slide');

设置选项

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

语法

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

slide()

幻灯片是.set()后，您可以使用.slide启动它( )方法.

语法

  slideElement.slide('in' );

.slide 将接受 : 去;

• 'in'

• 'out'

• 'toggle'

• 'show'

• 'hide'

...每个都对应上述方法.

示例

让我们举一个解释Fx.Slide的例子.请查看以下代码.

                                                   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();            });         });                  Start