MooTools - Fx.Slide
Fx.Slides 是一个选项，可让您通过滑入视图来显示内容。它非常简单，但可以增强 UI 的外观。
让我们讨论如何创建和初始化 Fx.Slide、其选项和方法。
首先，我们将使用用户定义的实例初始化 Fx.Slide 类。为此，我们必须创建并选择一个 HTML 元素。之后，我们将对这些元素应用 CSS。最后，我们将使用元素变量启动 Fx.Slide 的新实例。
Fx.Slide 选项
只有两个 Fx.Slide 选项 - 模式和包装器。
模式
模式为您提供两个选择，"垂直"或"水平"。垂直显示从上到下，水平显示从左到右。没有从下到上或从右到左的选项，但我知道破解类本身来实现这一点相对简单。在我看来，这是一个我希望看到的标准选项，如果有人破解了类以允许此选项，请给我们留言。
包装器
默认情况下，Fx.Slide 会在幻灯片元素周围放置一个包装器，使其为"溢出":"隐藏"。包装器允许您将另一个元素设置为包装器。就像我上面说的，我不清楚这在什么情况下有用，并有兴趣听听任何想法(感谢 mooforum.net 的 horseweapon 帮助我澄清这个问题)。
Fx.Slide 方法
Fx.Slide 还具有许多显示和隐藏元素的方法。
slideIn()
顾名思义，此方法将触发开始事件并显示您的元素。
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 的例子。看看下面的代码。
<!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>
输出
点击按钮 — 开盘、平盘、开盘、平盘D。观察指标上的变化、效果和事件通知。
