MooTools-Fx.Slide
Fx.Slidesは、ビューにスライドしてコンテンツを表示できるオプションです。非常にシンプルですが、UIの外観を向上させます。
Fx.Slideの作成と初期化、そのオプション、およびメソッドについて説明します。
まず、Fx.Slideクラスをユーザー定義のインスタンスで初期化します。そのためには、HTML要素を作成して選択する必要があります。その後、これらの要素にCSSを適用します。最後に、要素変数を使用してFx.Slideの新しいインスタンスを開始します。
Fx.Slideオプション
Fx.Slideオプションは、モードとラッパーの2つだけです。
モード
モードには、「垂直」または「水平」の2つの選択肢があります。垂直方向は上から下に、水平方向は左から右に表示されます。下から上、または右から左に移動するオプションはありません。これを達成するためにクラス自体をハッキングするのは比較的簡単であることを理解しています。私の意見では、これは私が標準で見たいオプションです。誰かがこのオプションを許可するためにクラスをハッキングした場合は、私たちにメモを送ってください。
ラッパー
デフォルトでは、Fx.Slideはスライド要素の周りにラッパーをスローし、「オーバーフロー」：「非表示」にします。ラッパーを使用すると、別の要素をラッパーとして設定できます。上で述べたように、これがどこで役立つのかはっきりしておらず、考えを聞くことに興味があります（これを解決するのを手伝ってくれたmooforum.netのhorseweaponに感謝します）。
Fx.Slideメソッド
Fx.Slideには、要素を表示および非表示にするための多くのメソッドもあります。
slideIn（）
名前が示すように、このメソッドはstartイベントを発生させ、要素を明らかにします。
slideOut（）
要素をスライドさせて非表示の状態に戻します。
トグル（）
これにより、現在の状態に応じて、要素がスライドインまたはスライドアウトされます。クリックイベントに追加する非常に便利な方法。
隠す（）
これにより、スライド効果なしで要素が非表示になります。
公演（）
これにより、スライド効果のない要素が表示されます。
Fx.Slideショートカット
Fx.Slideクラスは、要素に効果を追加するためのいくつかの便利なショートカットも提供します。
set（ 'slide'）
新しいクラスを開始する代わりに、要素にスライドを「設定」すると、新しいインスタンスを作成できます。
Syntax
slideElement.set('slide');設定オプション
ショートカットでオプションを設定することもできます-
Syntax
slideElement.set('slide', {duration: 1250});滑り台（）
スライドが.set（）になったら、.slide（）メソッドを使用してスライドを開始できます。
Syntax
slideElement.slide('in');.slide 受け入れる-
- ‘in’
- ‘out’
- ‘toggle’
- ’show’
- ‘hide’
…それぞれ上記の方法に対応します。
Example
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>Output
ボタン（openA、closeA、openB、およびcloseB）をクリックします。インジケーターの変更、効果、およびイベント通知を観察します。