Mootools 1.2 チュートリアルのスライド効果 (Slide)_Mootools

基本的な使用法
これまでに説明したすべてのクラスと同様、このクラスを要素に適用するときに最初に行う必要があるのは、新しい Fx.Slide インスタンスを初期化することです。
まず、スライド要素の HTML ファイルを作成しましょう。
参照コード:

コードをコピー コードは次のとおりです:

スライドして表示する内容は次のとおりです。

CSS も変更する必要はありません。
参照コード:

コードをコピー コードは次のとおりです:

.slide {
margin: 20px 0;
padding: 10px;
background-color: #DAF7B4;


最後に、新しい Fx.Slide を作成し、要素変数に渡します。

参照コード:

コードをコピー コードは次のとおりです:

var slideElement = $(' slide_element');

var slideVar = new Fx.Slide(slideElement, {
// Fx.Slide options
mode: 'vertical', // デフォルトは 'vertical' (垂直)
/ / Fx オプション
transition: 'sine:in',
duration: 300,
// Fx イベント
onStart: function(){
$('start') .highlight(" #EBCC22");
}
});


Fx.Slide は Fx の任意のオプションとイベントを使用できますが、Fx .Slide には独自のオプションもいくつかあります。

Fx.Slide のオプション
Fx.Slide には、「モード」と「ラッパー」の 2 つのオプションしかありません。率直に言って、私は「ラッパー」を使用していることに気づいたことがありません（その必要性に出会ったことはありません）が、「モード」は水平方向にスライドするか垂直方向にスライドするかを決定します。
mode (モード)
モードでは、「縦」または「横」の 2 つの選択肢があります。縦方向は上から下に表示され、横方向は左から右に表示されます。ここには、下から上、または右から左のオプションはありません。しかし、これらの関数を実装するためにクラス自体を変更するのは比較的簡単であることはわかっています。私の意見では、これが標準オプションになってほしいと思っています。誰かがこのクラスを変更してこれらのオプションを許可する場合は、私たちに連絡してください。
wrapper
デフォルトでは、Fx.Slide はスライディング要素の外側にラッパーを追加し、その「overflow」属性の値を「hidden」に割り当てます。 「wrapper」を使用すると、他の要素をこの要素のラッパーとして設定できます。上で述べたように、それがどこで使用されるかはわかりません。これについての意見を聞きたいと思っています。 (これを理解させてくれた mooforum.net の horseweapon に感謝します。)
Fx.Slide のメソッド
Fx.Slide には、要素を表示または非表示にするためのメソッドも多数用意されています。
.slideIn()
名前のとおり、このメソッドは開始時間をトリガーし、要素を表示します。
.slideOut()
要素をスライドして非表示状態にします。
.toggle()
このメソッドは要素を表示または非表示にすることができ、結果は要素の現在の状態に完全に依存します。クリックイベントに非常に便利です。
.hide()
これは要素を非表示にしますが、スライド効果は使用しません。
.show()
これは要素を表示しますが、スライド効果は使用しません。
メソッドによるモード オプションのリセット
上記の各メソッドはオプションのモード パラメータを受け入れることができ、以前に設定したオプションをオーバーライドできます。
参照コード:

コードをコピー コードは次のとおりです:

slideVar.slideIn ('horizo​​ntal ');

Fx.Slide ショートカット

Fx.Slide クラスは、要素にスライド効果を追加するための非常に便利なショートカットも提供します。
.set('slide');
新しいクラスを初期化せずに、set メソッドを通じて要素にスライド オブジェクトを追加することで、新しいスライド インスタンスを作成できます。
参照コード:

コードをコピー コードは次のとおりです:

slideElement.set ('slide ');

オプションを設定します

ショートカットからもオプションを設定できます:
参照コード:

コピーコード コードは次のとおりです:

slideElement.set('slide', {duration: 1250});
.slide()
.set() メソッドを使用してスライドを設定したら、.slide() メソッドを使用して初期化できます。
参照コード:

コードをコピー コードは次のとおりです:

slideElement.slide('in ');

.slide メソッドは次のパラメータを受け入れることができます:
'in'
'out'
'toggle'
'show'
' Hide'
各パラメータは上記のメソッドに対応します。
コード例
上記は基本的にすべての基本的な使用法をカバーしています。以下の例では、上で学んだことのほとんどを使用して、いくつかの異なるスライド要素を表示し、いくつかの div をインジケーターとして提供するため、これらのイベントを明確に確認できます。
まず、HTML ファイルを作成します。
参照コード:

コードをコピー コードは次のとおりです:

開始

キャンセル

完了

A id=" closeA">close A

ここにいくつかの内容があります - A. onComplete が起動するまでの遅延に注意してください。トランジション効果では、スライド要素の「伸縮」が停止するまで onComplete は起動しません。また、前後にクリックすると、前の呼び出しが「キャンセル」され、新しい呼び出しが優先されることに注意してください。 >B を開く
B を閉じる

で設定されています。

C

ここにコンテンツがあります - C

id=" openD">toggle D

ここにいくつかのコンテンツがあります - D. どのイベントにもハマっていないことに注目してください。 .slide ショートカットで完了します。

toggle E

id=" slideE" class="slide">ここにいくつかのコンテンツがあります - E

次は CSS ファイルです。できるだけシンプルにしています。
参照コード:

コードをコピー

コードは次のとおりです。 .ind { 幅: 200px; パディング: 10px;

フォントの太さ: 太字;

>.slide {
マージン: 20px 0;
パディング: 10px;
背景色: #DAF7B4;
#slide_wrap { : 30px;
background-color: #D47000;


最後に、Mootools JavaScript コード:
参照コード:




コードをコピー


コードは次のとおりです:

window.addEvent('domready', function() {
// 例 A
var slideElement = $('slideA');
var slideVar = new Fx.Slide(slideElement) , {
// Fx.Slide オプション
mode: 'horizo​​ntal', // デフォルトは 'vertical'
//wrapper: this.element, // デフォルトは this.element
// Fx オプション
link: 'cancel',
transition: 'elastic:out',
duration: 'long',
// Fx イベント
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22"); 🎜> },
onComplete: function(){
$('complete').highlight("#EBCC22");
}
}).hide().show().hide () ; // .hide メソッドと .show メソッドはイベントをトリガーしないことに注意してください
$('openA').addEvent('click', function(){
slideVar.slideIn();
});
$('closeA').addEvent('click', function(){
slideVar.slideOut();
});
// 例 B
var slideElementB = $( 'slideB');
var slideVarB = new Fx.Slide(slideElementB, {
// Fx.Slide options
mode: 'vertical', // デフォルトは 'vertical'
// Fx オプション
// 注: チェーン効果により、複数回クリックできます。
// マウスが離れると、
// 各クリックのアニメーションを順番にトリガーできます
link: 'chain',
// Fx イベント
onStart: function(){
$('start').highlight("#EBCC22"); function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("# EBCC22");
}
});
$('openB').addEvent('click', function(){
slideVarB.slideIn();
});
$('closeB ').addEvent('click', function(){
slideVarB.slideOut();
});
// 例 C
var slideElementC = $(' slideC');
var slideVarC = new Fx.Slide(slideElementC, {
// Fx.Slide options
mode: 'vertical', // デフォルトは 'vertical'
// ラッパー: this.element, // デフォルトは this.element
// Fx オプション
//link: 'cancel',
transition: 'sine:in',
duration: 300,
// Fx イベント
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('キャンセル').highlight ("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22"); }
}).hide ();
$('openC').addEvent('click', function(){
slideVarC.toggle();
}); ('slideD').slide( 'hide');
$('openD').addEvent('click', function(){
$('slideD').slide('toggle');
});
//例 C
var slideElementE = $('slideE');
var slideVarE = new Fx.Slide( slideElementE, {
// Fx.Slide options
//mode: 'vertical', // デフォルトは 'vertical' です
wrapper: slideWrap // デフォルトは this.element
}) .hide();
$( 'openE').addEvent('click', function(){
slideVarE.toggle();
}); 🎜>

さらに詳しく…





Fx.Slide は多機能で非常に便利なプラグインです。詳細については、

Fx.Slide ドキュメント

、

Fx.Morph

、および

Fx ドキュメント。 また、Fx.Morph および Fx のオプションとイベントに関する チュートリアル も必ずお読みください。

最終的なサンプル コードの zip ファイルをダウンロードします

開始するために必要なものがすべて含まれています。