TABS - jQuery TOOLS

[ 複数のタブとアコーディオンのインスタンス ] [ メニュー ] [ AJAXでタブの内容をローディング]

ブラウザの[戻る]ボタン処理

ここでは、ブラウザの[戻る]ボタンと[進む]ボタンのサポートを有効にするため、履歴プラグインを使用します。タブをクリックして、次に、その動きを見るために履歴ボタン（ブラウザの矢印ボタン）を使用します。

プレーヤー
プラグイン
ストリーミング
スクリプト

Lorem ipsum dolor sit amet

Consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.

Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.

Lorem ipsum dolor sit amet

Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.

Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui.

Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus eget dui volutpat molestie.

3番目のタブペインのタイトル

4番目のペインはここです

Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis nisi. Vivamus at enim. Integer semper imperdiet massa. Vestibulum nulla massa, pretium quis, porta id, vestibulum vitae, velit.

HTML コード

履歴サポートを有効にするには、タブへ固有のアンカーラベルを割り当てる必要があります。ここでは、t1、 t2、t3、t4 のような簡単なラベルを使用します:

<ul id="flowtabs">
	<li><a id="t1" href="#player_tab">The Player</a></li>
	<li><a id="t2" href="#plugins_tab">Plugins</a></li>
	<li><a id="t3" href="#streaming_tab">Streaming</a></li>
	<li><a id="t4" href="#scripting_tab">Scripting</a></li>
</ul>

<!-- the panes are defined normally, no need for labels -->
<div class="panes">
	<div> lorem ipsum ...</div>
	<div> lorem ipsum ...</div>
	<div> lorem ipsum ...</div>
</div>

JavaScript コード

tabs() をコールした後に、単純にチェーンされている追加の履歴プラグインにより、いつ通りの設定を行います。同じ方法で、同じページに複数のタブを設定することができます。

$(function() {
	$("#flowtabs").tabs("#flowpanes > div", { history: true });
});

このデモのスタンドアロン版を見てください。ページに掲載するためには、ソースコードを見てください。

[ 複数のタブとアコーディオンのインスタンス ] [ メニュー ] [ AJAXでタブの内容をローディング]