アコーディオン効果のカスタマイズ

このデモは、タブにカスタムの効果を追加する方法を示しています。スライド効果が発生したときに、 わずかに背景色が変るのを見ることができます:

1番目のペイン

Lorem ipsum dolor

Fusce semper, nisi nec pellentesque sollicitudin.

Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra ornare. Nulla id massa nec erat laoreet elementum. Vivamus tristique auctor odio. Integer mi neque.

2番目のペイン

Vestibulum ante ipsum

Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat. Praesent pretium tristique est. Maecenas nunc lorem, blandit nec, accumsan nec, facilisis quis, pede. Aliquam erat volutpat. Donec sit amet urna quis nisi elementum fermentum.

3番目のペイン

Curabitur vel dolor

Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna, non vulputate libero justo nec sem. Nullam arcu. Donec pellentesque vestibulum urna. In mauris odio, fringilla commodo, commodo ac, dignissim ac, augue.

カスタム効果の追加

カスタム効果を作成したい場合は、$.tools.tabs.addEffect() メソッドを使用します。最初の引数は、エフェクト名で、 2番目の引数は、タブ（またはアコーディオンヘッダ）がクリックされたときに必要な機能を実行する関数です。 既存のエフェクトを変更するか、または新しいものを追加するには、このメソッドを使用することができます。 ここでは、組込の "slide" 効果を変更します:

// 新しい効果をタブへ追加する
$.tools.tabs.addEffect("slide", function(i, done) {

	// 1. 隠すとすぐに、アクティブなペインの背景色はルビー色に設定する
	this.getPanes().slideUp().css({backgroundColor: "#b8128f"});

	// 2. ペインが表示されたら、背景は元の色（透明）に設定する
	this.getPanes().eq(i).slideDown(function()  {
		$(this).css({backgroundColor: 'transparent'});

		// effect は、その作業が終了した後、付属のコールバックを呼び出されなければならない
		done.call();
	});
});

effect 関数には、2つの引数が必要です。最初の引数 i は、タブ・インデックス番号を参照し、 2番目の引数 done は、effect がジョブ終了後に呼び出さなければならない関数です。 これは、done.call(); を呼び出すことによって達成できます。

JavaScript コード

effect を変更した後、アコーディオンのinstallationは、basic installation と同じです:

$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});