Mootools 1.2 チュートリアルタブ効果 (タブ)_Mootools-jsチュートリアル-php.cn

単純な「追加情報」タグ (TAB)
マウスをその上に移動するとコンテンツが表示されるタブ
この最初のプロジェクトでは、マウスを移動すると対応するコンテンツを表示する単純なメニューを作成しますこれらのメニューの内容です。まず、HTML コードを完成させましょう。4 つのリスト項目を含む ul を使用して、4 つの div を作成します (各 div はリスト項目に対応します):
参照コード:

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

// これがメニューです
 >1

2

3 
Four


// これがコンテンツ div 
1 つのコンテンツ

2 つのコンテンツ

3 つのコンテンツ

4 つのコンテンツ
美しくすることを心配する必要はありません。 CSS では、コンテンツ ブロックを非表示にするだけです。 
参照コード: [コードをコピー] [コードを保存] 
.hidden { 

display: none
}
わかりました。 MooTools コードの作成を開始します。ユーザーがマウスを上に移動したときにコンテンツを表示し、マウスを離したときにコンテンツを非表示にする必要がある場合は、次の 2 つの関数を完了する必要があります:
参照コード:

コードをコピーします

コードは次のとおりです。 var showFunction = function() { this.setStyle('display', 'block');

}

var hideFunction = function() { 
this.setStyle('display', 'none') 
} 

 
いくつかのイベントもあります: 
参照コード: 

コードをコピー

コードは次のとおりです: window.addEvent( 'domready', function() { // ここで、コンテナ要素を変数に割り当てることができます

var elOne = $('contentone');

$('one').addEvents({
// マウスが When に入ると、showFunction
// この要素をバインドします elOne
// したがって、それを関数パラメータとして使用する必要があります
'mouseenter': showFunction.bind(elOne ),
'mouseleave' : hideFunction.bind(elOne)
});
});
ここで、各タブに対してこのパターンを繰り返し、対応するコンテンツブロックを指定するだけです。完全なコードは次のとおりです。
リファレンスコード: [コードをコピー] [コードを保存]
// スタイルを変更するために使用される関数は次のとおりです。
var showFunction = function() {
this. setStyle( 'display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
ウィンドウ。 addEvent( 'domready', function() {
// ここで、コンテンツブロックをさまざまな変数に割り当てます
var elOne = $('contentone');
var elTwo = $('contenttwo') ;
var elThree = $('contentthree');
var elFour = $('contentfour');
// イベントをタブにバインドします
$('one').addEvents({
//イベントタイプを設定します
// 対応する変数をイベント制御関数にバインドします
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
});
$('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
} );
$('three').addEvents({
'mouseenter': showFunction.bind(elThree),
'mouseleave': hideFunction.bind(elThree)
}); ('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
}); >

ご覧のとおり、これはすべて非常に見慣れたものであり、これまでに学んだことのないものは何も必要ありません。
1
2
3
4
1 つのコンテンツ
2 つのコンテンツ
3 つのコンテンツ
4 つのコンテンツ
タブをクリックするとコンテンツが表示されます
上記のアイデアを借りて、クリックしたときにコンテンツが表示されるように簡単に調整できます。上記の HTML を使用し、MooTools コードを変更してクリックイベントを完了します。
まず、関数を調整する必要があります。マウスが離れたときにコンテンツを非表示にすることはできないため、これらの div を切り替える別の方法を見つける必要があります。おそらく最も簡単なオプションは、クリックされたときに最初にそれらをすべて非表示にし、次にこれが指す現在のコンテンツ (クリックイベントを通じて渡されたオブジェクト) のみを表示することです。
参照コード:

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

 
var showFunction = function() { 
$$('.hiddenB').setStyle('display', 'none'); 
this.setStyle('display', 'block'); 
 
要素を関数にバインドしてこの変数を渡すと、他のブロックが非表示になり、現在のブロックが表示されます。 

次に、イベントも調整する必要があります。まず、必要なイベントは 1 つだけなので、 .addEvent(); メソッドを使用し、次にイベントタイプを「click」に変更する必要もあります。
参照コード:

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

window.addEvent ('domready ', function() {

var elOneB = $('contentoneB'); 
var elTwoB = $('contenttwoB'); 
var elThreeB = $('contentthreeB'); 
var elFourB = $('contentfourB'); 
$('oneB').addEvent('click', showFunction.bind(elOneB)); 
$('twoB').addEvent('click' , showFunction.bind(elTwoB)); 
$('threeB').addEvent('click', showFunction.bind(elThreeB)); .bind( elFourB)); 
}); 

 
1 つの 
2 つの 

3 つの
4 つの
コンテンツ 2 つ
3 つのコンテンツ
4 つのコンテンツ
タブのコンテンツブロックに変形を追加
上記のコードを拡張することで、非表示のコンテンツブロックを表示する変形効果を追加できます。まず、以前と同じように Fx.Morph エフェクトを作成できますが、ここでは異なるスタイルを設定します。もちろん、Morph オブジェクトも作成する必要があります。
リファレンスコード:

コードをコピー

コードは次のとおりです。 var showFunction = function() { // 変形前にすべてのスタイルを初期化します

$$('.hiddenM').setStyles({

'display': 'none ', 
'opacity': 0, 
'background-color': '#fff', 
'font-size': '16px' 
}); ここで開始します
this.start({ 
'display': 'block', 
'opacity': 1, 
'background-color': '#d3715c' , 
'フォントサイズ': '31px' 
}); 
} 
window.addEvent('domready', function() { 
var elOneM = $('contentoneM') ; 
var elTwoM = $('contenttwoM'); 
var elThreeM = $('contentthreeM'); 
// 変形オブジェクトを作成します
elOneM = 新しい Fx.Morph(elOneM, { 
リンク: 'キャンセル' 
}); 
elTwoM = 新しい Fx.Morph(elTwoM, { 
リンク: 'キャンセル' 
 }); 
elThreeM = new Fx.Morph(elThreeM, { 
link: 'キャンセル' 
}); 
elFourM = new Fx.Morph(elFourM, { 
link: 'キャンセル' 
}); 
$('oneM').addEvent('click', showFunction.bind(elOneM)); 
$('twoM').addEvent('click', showFunction.bind(elTwoM) ); 
$('threeM').addEvent('click', showFunction.bind(elThreeM)); 
$('fourM').addEvent('click', showFunction.bind(elFourM )); 
}); 

 
上記と同じ HTML コードを使用すると、次のような結果が得られます: 
One 
Two 
Three 
Four 

コンテンツ 1 つ
コンテンツ 2 つ
コンテンツ 3 つ
コンテンツ 4 つ
注: 上の例をすばやくクリックすると、複数のコンテンツが同時にブロックで表示されます。基本的に、最後の変換が完了する前に showFunction が呼び出された場合、他のブロックの内容は非表示になりません。この問題を解決するには、このルールを破り、Fx.Elements を最大限に活用する必要があります。
コード例
次の例は上記の例と似ていますが、2 つのタブをすばやくクリックしても、複数のコンテンツ div は同時に表示されません。
参照コード:

コードをコピー

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

 
// すべての要素を非表示にする関数を作成します 
// 要素をパラメータとして渡すことができます 
var hideAll = function(fxElementObject){ 
fxElementObject.set({ 
 '0': { 
'表示': 'なし' 
}, 
'1': { 
'表示': 'なし' 
}, 
'2': { 
'表示': 'なし' 
}, 
'3': { 
'表示': 'なし' 
} 
}); >// ここで、各コンテンツ ブロックの関数を作成します 
var showFunctionOne = function() { 
// まず、関数 HideAll を呼び出します 
// 次に、Fx.element オブジェクトの参照 "this"パラメータを 
hideAll(this); 
 に渡します。// 対応する要素の Fx.element 変形アニメーションを開始します 
this.start({ 
'0': { 
 'display': [' none', 'block'], 
'background-color': ['#fff', '#999'], 
'font-size': ['16px', ' 25px'] 
 } 
}); 
} 
var showFunctionTwo = function() { 
hideAll(this)({ 
'1': { 
'表示 ': ['なし', 'ブロック'], 
'背景色': ['#fff', '#999'], 
'フォントサイズ': [' 16px', '25px' ] 
} 
}); 
} 
var showFunctionThree = function() { 
hideAll(this); '2': { 
'display': ['none', 'block'], 
'background-color': ['#fff', '#999'], 
'font-size ': ['16px' , '25px'] 
} 
}); 
} 
var showFunctionFour = function() { 
hideAll(this); { 
'3 ': { 
'表示': ['なし', 'ブロック'], 
'背景色': ['#fff', '#999'], 
 'font-size': ['16px', '25px'] 
} 
}) 
} 
window.addEvent('domready', function() { 
// 作成Fx.Elements を保存する配列 
var morphElements = $$('.hiddenMel'); 
// 新しい Fx.Element オブジェクトを作成します 
var elementEffects = new Fx.Elements(morphElements, { // 「link」オプションを cancel 
link: 'cancel' 
}); 
$('oneMel').addEvent('click', showFunctionOne.bind(elementEffects)); >$( 'twoMel').addEvent('click', showFunctionTwo.bind(elementEffects)); 
$('threeMel').addEvent('click', showFunctionThree.bind(elementEffects)); ('fourMel ').addEvent('click', showFunctionFour.bind(elementEffects)); 

 
その他の学習
このチュートリアルでは、ここで説明した内容を確認して適用します。学習しました 以前のチュートリアルから学んだこと。したがって、まだ準備ができていない場合は、対応するドキュメントをすべて読むことをお勧めします。これは思っている以上に興味深いものです。このライブラリを初めて使用するものの、この一連のチュートリアルに従っている場合は、どれだけ理解しているかに驚かれるかもしれません。 (Fdream 注: これは、この一連のチュートリアルで取り上げられる内容が十分に包括的ではないことを意味するため、すべてのドキュメントを注意深く読むことを強くお勧めします。) 





最後の例のコードをダウンロードします 