TABS - jQuery TOOLS

[ 履歴をサポートするAJAXedタブ ] [ メニュー ] [ ツールチップの基本的な使い方]

タブのスライドショープラグインブ

ここでは、スライドショープラグインを実行して見ることができます。矢印ボタンをクリックすると、ナビゲータまたはコンテンツエリアがスライドして移動します。また、スライド下の"再生"ボタンを押せば、自動的にスライドショー開始することができます。

前に

1番目のペイン

Aenean nec imperdiet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Suspendisse potenti. Sed elementum risus eleifend massa vestibulum consectetur. Duis massa augue, aliquam eget fringilla vel, aliquam vitae arcu. Nam sed magna mi. Praesent odio neque, dapibus sit amet suscipit at, tempus sed nibh. Aliquam sagittis ligula in ligula faucibus cursus. Quisque vulputate pellentesque facilisis.

2番目のペイン

Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.

Vivamus euismod euismod sagittis. Etiam cursus neque non lectus mattis cursus et a libero. Vivamus condimentum hendrerit metus, a sollicitudin magna vulputate eu. Donec sed tincidunt lectus. Donec tellus lectus, fermentum sit amet porta non, rhoncus ac mi. Quisque placerat auctor justo, a egestas urna tincidunt eleifend.

3番目のペイン

Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.

Aenean elit lorem, pretium vitae dictum in, fermentum consequat dolor. Proin consectetur sollicitudin tellus, non elementum turpis pharetra non. Sed quis tellus quam.

スライドショーの"再生中"に、マウスをスライドショー要素の上に移動すると、自動的に一時停止することに注意してください。

HTML コード

HTMLの設定は、利用可能にする "次へ" と "前に" アクションボタンを持っていること、およびタブがペインの下に配置されていることを除けば、通常のタブの設定に同じです。

<!-- "前にスライド" ボタン -->
<a class="backward">back</a>

<!-- スライドのコンテナ -->
<div class="images">

    <!-- 1番目のスライド -->
    <div>Lorem ipsum ..</div>

    <!-- 2番目のスライド -->
    <div>Lorem ipsum ..</div>

    <!-- 3番目のスライド -->
    <div>Lorem ipsum ..</div>

</div>

<!-- "次へスライド" ボタン -->
<a class="forward">forward</a>

<!-- タブ -->
<div class="slidetabs">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</div>

スタイルは、tabs-slideshow.css ファイルを使用します。

JavaScript コード

JavaScriptの設定はとても簡単です。slideshow プラグインは、タブの初期化をコールした後にチェーンします。 fade 効果と一緒に非ゼロの fadeOutSpeed は、"cross-fading" 効果を作成します。 rotate コンフィギュレーションプロパティは、最後のタブが検出されたとき、次のタブが最初から開始するように、スライドを動作させます。前のタブから逆方向に行くときも、同じことが起こります。

$(".slidetabs").tabs(".images > div", {

	// "cross-fading" 効果を有効にする
	effect: 'fade',
	fadeOutSpeed: "slow",

	// 最後のタブの後は最初に戻る
	rotate: true

// slideshow プラグインを使用する。独自の設定を受け入れる
}).slideshow();

再生/停止アクション・ボタン

再生と停止アクションボタンは、自動スライドショーの効果を表示するためのものです。slideshow プラグインは、メインの Tabs API に additional API methods を追加し、それらのボタンは、新規の play および stop メソッドを次のようにコールします:

<button onClick='$(".slidetabs").data("slideshow").play();'>Play</button>
<button onClick='$(".slidetabs").data("slideshow").stop();'>Stop</button>

このデモのスタンドアロン版を見てください。ソースは、自由に学習やコピーができます。

[ 履歴をサポートするAJAXedタブ ] [ メニュー ] [ ツールチップ使用の基本]